Question

我正在将图像（必须纵向）导入画布对象，旋转它（因为它实际上是风景），并在画布的base64上运行一些OCR。一切正常。但是，当我在画布上放置新图像时，旧图像将保留并且永远不会被替换。我已经尝试过clearRect，甚至每次都创建一个新的dom元素，并在我有需要的所有东西时销毁它（仍然在下面的代码中），但是我无法清除第一张图像。

这是代码的相关部分

function onSuccess(imageURI) {

//CREATE NEW CANVAS ELEMENT
  g = document.createElement('canvas');
  g.setAttribute("id", "thePic");
  g.style.overflow = "visible";

  document.body.appendChild(g);

  const canvas = document.getElementById('thePic'),
  context = canvas.getContext('2d');

  make_base();

  function make_base()
  {
    base_image = new Image();
    base_image.src = imageURI;

    base_image.onload = function(){
    const uriheight = base_image.naturalHeight;
    const uriwidth = base_image.naturalWidth;
    console.log(uriwidth + " " + uriheight);

    context.canvas.width  = uriheight;
    context.canvas.height = uriheight;

    context.drawImage(base_image, 0, 0);

//ROTATE THE IMAGE 90
        context.clearRect(0,0,canvas.width,canvas.height);
        context.save();
        context.translate(canvas.width/2,canvas.height/2);
        context.rotate(90*Math.PI/180);
        context.drawImage(base_image,-base_image.width/1.2,-base_image.width/1.2);
        context.restore();

var theCanvas = document.getElementById('thePic');
var rotImg = theCanvas.toDataURL();
var rotImg = rotImg.substring(21);


              textocr.recText(4, rotImg, onSuccess, onFail);
              function onSuccess(recognizedText) {

        var recdata = recognizedText.lines.linetext;
        var blockData = recognizedText.blocks.blocktext;


    context.clearRect(0, 0, 10000,10000);
    base_image = "";
    rotImg = "";
    document.getElementById('thePic').outerHTML = "";
    document.getElementById('cgh').innerHTML = "";
  }
}
}

任何建议都值得赞赏。

Answer 1

因此，事实证明它根本不是画布，而是先前功能中的图像缓存将图像提供给了画布。

感谢所有花时间进行小测验的人。

似乎无法从画布上获得旧图像

1 个答案: