将图像转换为数据网址

时间:2017-07-14 01:40:23

标签: javascript html html5-canvas

您好我想将img转换为数据网址。 ex)test.jpg - >数据:图像/ JPG; BASE64 / sdfeffsjfsakjf .... fefsadf

但我不工作。

错误代码是

  

未捕获DOMException:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布。       在HTMLImageElement.img.onload

我搜索这条消息。人们说,添加“img.setAttribute('crossOrigin','anonymous');” 但是不行。

您可以查看此代码吗?

<html>
<head>

</head>

<script src="jquery-1.12.3.js"></script>
<script>
$(document).ready(function(){
    console.log('good');
    console.log($('#tt'));
var myCanvas = document.getElementById('nn');
var ctx = myCanvas.getContext('2d');
var img = document.getElementById('tt');
//var img = new Image();
//img.setAttribute('crossOrigin', 'anonymous');
img.crossOrigin="anonymous";
//img.src = "test.jpg";
console.log(img);
img.onload = function(){
    myCanvas.width = img.width;
    myCanvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    console.log(myCanvas.toDataURL('image/jpeg'));
};
});
</script>

<body>
    <img id="tt" src="test.jpg" >
    <canvas id="nn"  width="240" height="297" style="border:1px solid #d3d3d3;"></canvas>
    <div id="gg"></div>
</body>

</html>

0 个答案:

没有答案