Canvas与Image互相变换实例编码

摘要: 文中向大伙儿展现如何变换Image为canvas,及其canvas怎样获取出一个Image,实例编码以下,有此要求的朋友能够参照下,期待对大伙儿有一定的协助! JS Canvas与Image相互之间变换全文演试...

文中向大伙儿展现如何变换Image为canvas,及其canvas怎样获取出一个Image,实例编码以下,有此要求的朋友能够参照下,期待对大伙儿有一定的协助!
 

JS Canvas与Image相互之间变换 全文演试:JavaScript Canvas Image Conversion Demo

 

变换 Image 为 Canvas 要把照片变换为Canvas(画板,画布),可使用canvas原素 context 的drawImage方式:

// 把image 变换为 canvas目标
function convertImageToCanvas(image) {
// 建立canvas DOM原素,并设定其宽高和照片一样
var canvas = document.createElement( canvas 
canvas.width = image.width;
canvas.height = image.height;
// 座标(0,0) 表明此后处刚开始绘图,非常于偏位。
canvas.getContext( 2d ).drawImage(image, 0, 0);
return canvas;
变换 Canvas 为 Image 假定图象早已在canvas上解决好,那麼可使用于正下方法,把canvas变化为照片Image目标。

// 从 canvas 获取照片 image
function convertCanvasToImage(canvas) {
//新Image目标,能够了解为DOM
var image = new Image();
// canvas.toDataURL 回到的是一串Base64编号的URL,自然,访问器自身毫无疑问适用
// 特定文件格式 PNG
image.src = canvas.toDataURL( image/png 
return image;
额!图象image和canvas的相互之间变换比你要象的也要非常容易,之后我将向你演试不一样的图象解决技术性,坚信在将来你毫无疑问可用这种技术性赚到大钱。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:抽奖h5