利用canvas合并2张图片，并以图片或base64形式输出

2024-06-29 04:09| 来源: 网络整理| 查看: 265

var id1Src=document.getElementById("id_img1"); var id2Src=document.getElementById("id_img2"); function getBase64(id1Src，id2Src){ var _width=parseInt($("#id_img1").width()/2.3); var _height=parseInt($("#id_img1").height()/2.3); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.drawImage(id1Src, 130, 135, _width, _height); context.drawImage(id2Src, 130, 410, _width, _height); var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); var _base64=newImg.src.split("base64,")[1]; return _base64; }

说明：newImg即为转换出的图片，_base64即为图片的base64值。

-----------------------------------------------------后期发现直接将图片缩小会使照片变的模糊，思考了发现有2个问题：

1.用drawImage的时候缩小照片使照片掉清晰度。2.有些函数应该在照片加载过后才进行，即利用img.onload()。修改后代码如下:

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //获取照片的宽高和照片的src var _width = parseInt($("#id_img1").width()); var _height = parseInt($("#id_img1").height()); var id1Src = document.getElementById("id_img1"); var id2Src = document.getElementById("id_img2"); //根据图片宽高确定画布大小并画出一个矩形区域 canvas.width=_width*2; canvas.height=_height*4.5; context.clearRect(0,0,canvas.width,canvas.height); var img1=new Image(); img1.src =$("#id_img1").attr("src"); img1.οnlοad=function(){ //绘画 context.drawImage(id1Src,0.5*_width,_height,_width,_height); } var img2=new Image(); img2.src =$("#id_img2").attr("src"); img2.οnlοad=function(){ //绘画 context.drawImage(id2Src,0.5*_width,2.5*_height,_width,_height); //最后将画布转换为图片 var dataURL = canvas.toDataURL('image/png', 1); //转换图片为dataURL callBase(dataURL,count); }

【本文地址】

公司简介

联系我们