使用canvas将图片转换成base64格式

责编:menVScode 2018-10-24 11:19 阅读(62)

注意:canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.


完整demo

html代码

<canvas id="canvas"></canvas>

js代码

function getBase64Image(imgurl) {
	var canvas=document.getElementById("canvas"),//获取canvas
        ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
        img = new Image(),//创建新的图片对象
        base64 = '' ;//base64 
	    img.setAttribute("crossOrigin",'Anonymous') // 解决异常设置
	    img.src = imgurl;
	    img.onload = function(){//图片加载完,再draw 和 toDataURL
	       ctx.drawImage(img,0,0);    
	       base64 = canvas.toDataURL("image/png"); 
	       // return base64
	    }
}

getBase64Image('http://f.51fanbei.com/test/64d6481fa49025a4.png')


标签: canvas base64
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码