在項(xiàng)目中,需要生成海報(bào)。有動(dòng)態(tài)信息(微信頭像、微信昵稱、上傳圖片(oss鏈接)、二維碼)+ 海報(bào)背景圖生成一張海報(bào)。
技術(shù)支持:canvas? 生成。
問(wèn)題:canvas 圖片跨域。
解決過(guò)程(填坑歷程):
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.從網(wǎng)上存在如圖解決辦法? ? ?img.crossOrigin? = ""? ?(專業(yè)采坑,數(shù)年)。親測(cè)無(wú)效。很是不解。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.網(wǎng)上也存在后端服務(wù)解決
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? A.設(shè)置header頭,或者nginx 服務(wù)配置等? 允許訪問(wèn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?但是,存在問(wèn)題(圖片大部分為了優(yōu)化,都會(huì)存放在第三方cdn.上面。這是第三方的配置,是否允許,自己很難控制)
? ? ? ? ? ? ? ? ? ? ?0個(gè)小時(shí)。。。。。。。
? ? ? ? ? ? ? ? ? ? ?1個(gè)小時(shí).。。。。。。。。。。
? ? ? ? ? ? ? ? ? ? ? 0下午。。。。。。。。。。。。
? ? ? ? ? ? ? ? ? ? ? 1下午。。。。。。。。。。。。。
? ? ? ? ? ? ? ? ? ? ? 0天。。。。。。。。。。。。。。。。
解決辦法:采用所有圖片路徑,轉(zhuǎn)化為base64流,來(lái)處理。相對(duì)于本地圖片了。此時(shí),就避開了跨域問(wèn)題。
? ? ? ? ? ? ? ? ? 圖片路徑,轉(zhuǎn)base64,后端處理,更方便。
? ? ? ? ? ? ? ?eg: php
/**
* @param $url
* @return bool|string
* Name: master_imgUrl_base64
* User: 奔跑吧笨笨
* Date: 2018/04/12
* Explain:CDN遠(yuǎn)程圖片URL下載,并轉(zhuǎn)化為base64
*/
protected function master_imgUrl_base64($url){
? ? if($url){
? ? ? ? $header = array(
? ? ? ? ? ? 'User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0',
? ? ? ? ? ? 'Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3',
? ? ? ? ? ? 'Accept-Encoding: gzip, deflate',);
? ? ? ? $curl = curl_init();
? ? ? ? curl_setopt($curl, CURLOPT_URL, $url);
? ? ? ? curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
? ? ? ? curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
? ? ? ? curl_setopt($curl, CURLOPT_ENCODING, 'gzip');
? ? ? ? curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
? ? ? ? $data = curl_exec($curl);
? ? ? ? $code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
? ? ? ? curl_close($curl);
? ? ? ? if ($code == 200) {//把URL格式的圖片轉(zhuǎn)成base64_encode格式的!
? ? ? ? ? ? $imgBase64Code = "data:image/jpeg;base64," . base64_encode($data);
? ? ? ? ? ? return $imgBase64Code;
? ? ? ? }else{
? ? ? ? ? ? return false;
}
? ? }else{
? ? ? ? return false;
}
}
附加,海報(bào)中需要生成二維碼。
技術(shù)支持:jquery.qrcode.min.js
方法:1.html? ?中放入盒子
<div style="display:none;" id="qrcode">
? ?2.? js
$("#qrcode").qrcode({
render:"canvas",
text: data.info.u_url
});
var codeCanvas=document.getElementById("qrcode").getElementsByTagName("canvas")[0];
var codeContext =codeCanvas.getContext("2d");
var imgsSrc1 =codeCanvas.toDataURL('image/jpg');
do_canvasa(data.info,imgsSrc1);
//? 此方法? 為canvas 生成海報(bào)? 參數(shù)一:微信頭像、微信昵稱等? ? 參數(shù)二:二維碼
3.
function do_canvasa(data,imgsSrc1) {
// 原圖片
? ? var oldImg = data.upload_img;
// 新圖片
? ? var newImg ='';
$('.close').on('click',function(){
$('.dialog').fadeOut();
$('#cutImg').fadeOut();
});
//獲取裁剪圖片
? ? var clipArea =new? PhotoClip("#clipArea", {
size: [237,263],//裁剪框大小
? ? ? ? outputSize:[0,0],//打開圖片大小,[0,0]表示原圖大小
? ? ? ? img:oldImg,// 原圖片
? ? ? ? ok:"#sure",
loadStart:function() {//圖片開始加載的回調(diào)函數(shù)。this 指向當(dāng)前 PhotoClip 的實(shí)例對(duì)象,并將正在加載的 file 對(duì)象作為參數(shù)傳入。(如果是使用非 file 的方式加載圖片,則該參數(shù)為圖片的 url)
// $(".loading").removeClass("displaynone");
? ? ? ? },
// $(".loading").addClass("displaynone");
? ? ? ? },
//確定
? ? ? ? done:function(dataURL) {//裁剪完成的回調(diào)函數(shù)。this 指向當(dāng)前 PhotoClip 的實(shí)例對(duì)象,會(huì)將裁剪出的圖像數(shù)據(jù)DataURL作為參數(shù)傳入。
// console.log(dataURL);//dataURL裁剪后圖片地址base64格式提交給后臺(tái)處理
? ? ? ? ? ? newImg = dataURL;
canvasImg();
$('#cutImg').fadeOut();
$('.dialog').fadeIn();
$(".pos").fadeIn();
}
});
//取消
? ? $('.back').on('click',function(){
$('#cutImg').fadeOut();
});
function canvasImg(){
//獲取canvas
? ? ? ? var canvas =document.getElementById('canvas');
//設(shè)置寬高
//想獲取高清圖請(qǐng)*2,一般的直接等于Width就行
? ? ? ? var Height =window.innerHeight*2;
var Width =window.innerWidth*2;
//canvas繪制需要的對(duì)象
// console.log(Width, canvas.width, $('.poster').width())
? ? ? ? var ctx =canvas.getContext("2d");
canvas.width =Width;
canvas.height =Height;
//獲取圖片
// var mainImg = document.getElementById('mainImg');
//獲取圖片
? ? ? ? var imgs = {
bg: data.img_posters,//大背景
? ? ? ? ? ? via: data.wx_img,//頭像
? ? ? ? ? ? pho:newImg,
qrCode: imgsSrc1//二維碼
? ? ? ? };
var draw = {};
//載入圖片
? ? ? ? draw.into =function(){
var imgNum =0;
for(var key in imgs){
var img =new Image();
img.crossOrigin ="";
img.src =imgs[key];
imgs[key] =img;
imgs[key].onload =function(){
imgNum++;
if(imgNum == Object.keys(imgs).length)draw.drawImg();
}
}
};
//繪制canvas
? ? ? ? draw.drawImg =function(){
//背景圖
? ? ? ? ? ? ctx.drawImage(imgs.bg,0,0,Width,Height);
//頭像
? ? ? ? ? ? ctx.save();
ctx.arc(Width*0.09,Height*0.113,Width*0.065,0,360);
ctx.clip();
ctx.drawImage(imgs.via,Width*0.022,Height*0.072,Width*0.14,calcHeight(imgs.via,Width*0.14));
ctx.restore();
//顏色
? ? ? ? ? ? ctx.fillStyle ='#fff';
//字體設(shè)置 三個(gè)參數(shù),font-weight font-size font-family
? ? ? ? ? ? ctx.font ='26px microsoft yahei';
//說(shuō)明
// (scaled-0.62)
? ? ? ? ? ? ctx.fillText(''+data.wx_name+'',Width*0.168,Height*0.11);
ctx.font ='bold 24px microsoft yahei';
ctx.fillStyle ='red';
ctx.textAlign="center";
ctx.fillText(''+data.order_num+'',Width*0.305,Height*0.14);
//照片
? ? ? ? ? ? ctx.save();
//圓角矩形
? ? ? ? ? ? CanvasRenderingContext2D.prototype.roundRect =function (x, y, w, h, r) {
//if (w < 2 * r) r = w / 2;
//if (h < 2 * r) r = h / 2;
? ? ? ? ? ? ? ? this.beginPath();
this.moveTo(x+r, y);
this.arcTo(x+w, y, x+w, y+h, r);
this.arcTo(x+w, y+h, x, y+h, r);
this.arcTo(x, y+h, x, y, r);
this.arcTo(x, y, x+w, y, r);
// this.arcTo(x+r, y);
? ? ? ? ? ? ? ? this.closePath();
return this;
};
ctx.roundRect((Width-237 *Width /374)/2 +7,Height *367 /976 +8,237 *Width /374 -15,258 *Height /664 -6,20);
ctx.fillStyle ='#fff';
ctx.fill();
ctx.clip();
ctx.drawImage(imgs.pho, (Width-237 *Width /374)/2 +7,Height *367 /976 +8,237 *Width /374 -15,258 *Height /664 -6);
ctx.restore();
//二維碼
? ? ? ? ? ? ctx.drawImage(imgs.qrCode,44 /374 *Width ,525 /662 *Height,85 *Width /374,calcHeight(imgs.qrCode,85 *Width /374));
//獲取base64格式的src
? ? ? ? ? ? var imgSrc =canvas.toDataURL('image/jpg');
mainImg.src =imgSrc;
};
draw.into();
function calcHeight(obj, w){
return w / obj.width * obj.height;
}
$('#mainImg').load(function() {
$(".pos").fadeOut()
});
}
}
我為人人,人人為我;美美與共,天下大同;
csdn鏈接:canvas 圖片跨域