前段時間公司做活動，有個合成圖片的需求。 當時就想到用canvas，結果沒想到一路走來全是坎兒！ 今天有時間也就做個回顧，記錄一下遇到的那些坑！
1、圖片合成后，canvas的toDataURL獲取的base64沒有圖片背景
這個問題當時在網上找了好久，發現圖片會再存在跨域問題，或者沒有在onload加載完圖片后在畫。
oImg.crossOrigin = "Anonymous"; 這句代碼貌似可以解決部分跨域問題，但是我這里的情況略有不同，最后還是用了本地圖片！
2、合成多張圖片，后合成的總被覆蓋，看不到
ps：gd是獲取的繪圖上下午變量。
下面這兩個可以用來調整，類似 z-index 的感覺。
gd.globalCompositeOperation="source-over";
gd.globalCompositeOperation="source-over";
3、合成多張圖片，或者第二張圖片偶爾會合成失敗
這個問題目前沒有好的解決辦法，之前用過兩個onload，失敗、然后事件連等、第二張不會合成失敗了，但是獲取的toDataURL又出了問題，base64無效。后來只有把需求砍掉了，有時間研究出來在寫了！
4、對、想起一個頭疼的問題，合成的圖片清晰度不夠，以后找到解決辦法在補上吧！
還有一些坑暫時也想不起來了！ 記性太差，以后遇到的坑，還是及時記下來的好，不然簡直是隔夜忘......
下面就上代碼！
var params = function (u, paras) {
var url = u;
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
var paraObj = {};
for (i = 0; j = paraString[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
var ret = paraObj[paras.toLowerCase()];
if (typeof(ret) == "undefined") {
return "";
} else {
return ret;
}
};
var imgUrl = decodeURI(params(location.search, "img"));
if(imgUrl){
$("#IMG").attr("src",imgUrl);
$("#weixinFenx").show();
$("#makeMy").on("click",function(){
$("#weixinFenx").hide();
/*setTimeout(function(){
$("#weixinFenx").remove();
},1000);*/
});
}
var W=document.documentElement.clientWidth;
var H=document.documentElement.clientHeight;
var mb=1;
var imgData='';
var select=[
'職場之路，與你相伴，真好！節日快樂~'
];
// swper輪播圖
var ld=document.querySelector('#ld').src;
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
// autoplay:2000,
// autoplayDisableOnInteraction:false,
loopedSlides: 5, //looped slides should be the same
onSlideChangeEnd: function(swiper){
var aImg=document.querySelectorAll('.gallery-top .swiper-wrapper img');
for(var i=0; i<aImg.length; i++){
// console.log(aImg[i].src);
}
// mb=(swiper.activeIndex%5)+1;
mb=aImg[(swiper.activeIndex%8)].src;
// console.log(aImg[(swiper.activeIndex%5)].src)
// alert(mb) //切換結束時，告訴我現在是第幾個slide
}
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
touchRatio: 0.2,
loop:true,
loopedSlides: 5, //looped slides should be the same
slideToClickedSlide: true,
// onSlideChangeStart: function(swiper){
// alert(swiper.activeIndex);
// }
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
var oBox=document.querySelector('#canvas');
// 生成圖片
function merge(){
var baseWidth = 750 / 100;//設計圖尺寸
if (W > 640) {
W = 640;
}
var size = W / baseWidth;
function ptr(val){
return (val/100)*size;
}
var oCanvas = document.createElement('canvas');
if(document.getElementById('c1')==null){
// var oCanvas = $("<canvas id='c1'></canvas>");
// console.log(W,H)
oCanvas.id='c1';
// console.log(document.documentElement.style.fontSize,size);
// console.log((643/100)*size);
oCanvas.width=ptr(643);
oCanvas.height=ptr(829);
oBox.appendChild(oCanvas);
}
var w=(643/100)*size;
var h=(829/100)*size;
// console.log(w,h)
var oC = document.querySelector('#c1'); // E:\whs\weixin\member_branch_teacher_20170904\app\webroot\dream\js\make.js
var gd = oC.getContext('2d');
var oImg = new Image();
// oImg.crossOrigin="anonymous";
oImg.crossOrigin = "Anonymous";
// oImg.src = `dream/images/m-${mb}.png`;
oImg.src = mb;
var oImg2 = new Image();
// oImg.crossOrigin="anonymous";
oImg2.crossOrigin = "Anonymous";
// oImg2.src = 'dream/images/ld.png';
oImg2.src = ld;
function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){
function getTrueLength(str){//獲取字符串的真實長度（字節長度）
var len = str.length, truelen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
truelen += 2;
}else{
truelen += 1;
}
}
return truelen;
}
function cutString(str, leng){//按字節長度截取字符串，返回substr截取位置
var len = str.length, tlen = len, nlen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
if(nlen + 2 < leng){
nlen += 2;
}else{
tlen = x;
break;
}
}else{
if(nlen + 1 < leng){
nlen += 1;
}else{
tlen = x;
break;
}
}
}
return tlen;
}
for(var i = 1; getTrueLength(text) > 0; i++){
var tl = cutString(text, bytelength);
ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
text = text.substr(tl);
}
}
gd.font = ptr(30)+"px 微軟雅黑";
gd.textAlign = 'left';
gd.textBaseline = 'middle';
var str = 'To：'+$('.to').val();
gd.fillText(str,ptr(20),ptr(506));
gd.font = ptr(30)+"px 微軟雅黑";
gd.textAlign = 'right';
gd.textBaseline = 'middle';
var str = 'From：'+$('.form').val();
gd.fillText(str,ptr(620),ptr(750));
gd.font = ptr(26)+"px 微軟雅黑";
gd.textAlign = 'center';
gd.textBaseline = 'middle';
var str = ' 這是我的明ptr(310),ptr(506)我的明信片';
var count=$('.val').val()?$('.val').val():select[$('.select').val()-1];
str=' '+count;
writeTextOnCanvas(gd,ptr(60),48,str,ptr(320),ptr(566));
oImg.onload= function(){
gd.globalCompositeOperation="destination-over";//source-over
gd.drawImage(
oImg,
0,0,643,829,
0,0,w,h
);
function convertBase64UrlToBlob(urlData,type){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭，并轉換為byte
//處理異常,將ascii碼小于0的轉換為大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/'+type});
}
var ctx = document.getElementById('c1');
var dataURL = ctx.toDataURL("image/png",1.0);/*data:image/png;base64,*/
var file1=convertBase64UrlToBlob(dataURL,"png");
$.ajax({
url:'',
type: "post",
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
dataType: 'dataType',
timeout: 80000,
data: {
"img":dataURL.substring(22)
},
success: function(data) {
var res=JSON.parse(data);
console.log(JSON.parse(data));
ctx.style.display='none';
var fenImg=document.querySelector('.imgFen img');
var Img = document.createElement('img');
Img.id='imgURI';
Img.setAttribute('src', res.data);
fenImg.setAttribute('src', res.data);
oBox.appendChild(Img);
$("#imgURI").attr("width","75%");
$("#imgURI").attr("display","block");
$("#imgURI").attr("margin","0 auto");
},
error: function(data) {
console.log(data)
}
})
};
}
附上一張合成圖！
image.png
