javascript - Ajax 响应图像元素到 Canvas 上

Question

我的网站上有一个上传照片按钮，可以将 jpeg 和 png 格式的文件上传到数据库中。成功完成后，它会在网站上显示照片。

成功完成后，ajax success 调用 after_success 函数，该函数将响应数据作为其参数。

函数如下所示:

function after_success(data){


}

响应数据如下所示:

<img src="uploads/56dda66be0181.png">

无论此响应中出现什么图像，我都会尝试将其绘制在 Canvas 上。

我的解决方案:

var canv=document.getElementById("output");
var ctx=canv.getContext("2d");
var canimg=($('img',data));
ctx.drawImage(canimg,10,10);

但这似乎不起作用。我如何获取此 Canvas 元素上的图像？

注意:使用 Div 元素和 jquery .html() 它确实显示 Div 元素内的图像。

Answer 1

好吧，如果我理解正确的话，从上传的响应中你会得到一个图像标签，你想用 id 输出将相同的图像绘制到 Canvas 上。

分解 -1.您给出了从您作为响应获得的img标签的src中获取图像url。2.你必须将它绘制到输出

var after_success = function(data){

    $('.someHiddenDiv').append(data);//append the response data to some div which is invisible. This is just to get jQuery to access the element as dom.

       var img = new Image();//well initialize a new image
       //on load of the image draw it on to canvas
       img.onload = function(){
           var canvas = document.getElementById('output');
           var ctx = canvas.getContext('2d');
           ctx.drawImage(img,10,10);//same as what you have done
       };
       img.src = $('.someHiddenDiv').find('img').attr('src');//get source from the image tag

    }

这应该有效!