canvas 圖片跨域 +海報(bào)生成+二維碼

在項(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 圖片跨域

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一：canvas簡(jiǎn)介 1.1什么是canvas？ ①：canvas是HTML5提供的一種新標(biāo)簽 ②：HTML5 ...
    GreenHand1閱讀 4,708評(píng)論 2贊 32
  • 一、canvas簡(jiǎn)介 1.1 什么是canvas？（了解） 是HTML5提供的一種新標(biāo)簽 Canvas是一個(gè)矩形區(qū)...
    Looog閱讀 3,959評(píng)論 3贊 40
  • 一、canvas簡(jiǎn)介 1.1 什么是canvas？（了解） 是HTML5提供的一種新標(biāo)簽 Canvas是一個(gè)矩形區(qū)...
    J_L_L閱讀 1,556評(píng)論 0贊 4
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,046評(píng)論 0贊 2
  • 啥是canvas？ HTML5 標(biāo)簽用于繪制圖像（通過(guò)腳本，通常是 JavaScript）。不過(guò)， 元素本身...
    kiaizi閱讀 787評(píng)論 0贊 4