在專案中，需要生成海報。有動態資訊（微信頭像、微信暱稱、上傳圖片（oss連結）、二維碼）+ 海報背景圖生成一張海報。

技術支援：canvas  生成。

問題：canvas 圖片跨域。

解決過程（填坑歷程）：

                                   1.從網上存在如圖解決辦法     img.crossOrigin  = ""   （專業採坑，數年）。親測無效。很是不解。

                                2.網上也存在後端服務解決

                                        A.設定header頭，或者nginx 服務配置等  允許訪問

                                 但是，存在問題（圖片大部分為了優化，都會存放在第三方cdn.上面。這是第三方的配置，是否允許，自己很難控制）

                     0個小時。。。。。。。

                     1個小時.。。。。。。。。。。

                      0下午。。。。。。。。。。。。

                      1下午。。。。。。。。。。。。。

                      0天。。。。。。。。。。。。。。。。

解決辦法：採用所有圖片路徑，轉化為base64流，來處理。相對於本地圖片了。此時，就避開了跨域問題。

                  圖片路徑，轉base64,後端處理，更方便。

               eg: php

/**
 * @param $url
 * @return bool|string
 * Name: master_imgUrl_base64
 * User: wangjiapeng
 * Date: 2018/04/12
 * Explain:CDN遠端圖片URL下載，並轉化為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格式的圖片轉成base64_encode格式的！
$imgBase64Code = "data:image/jpeg;base64," . base64_encode($data);
return $imgBase64Code;
        }else{
return false;
        }
    }else{
return false;
    }
}

附加，海報中需要生成二維碼。

技術支援：jquery.qrcode.min.js

方法：1.html   中放入盒子

<!--二維碼-->
<div style="display: none;" id="qrcode">

$("#qrcode").qrcode({
    render: "canvas",
    text: data.info.u_url  (要生成的url:例 https://blog.csdn.net/qq_37837134）
});
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 生成海報   引數一：微信頭像、微信暱稱等     引數二：二維碼

3.

function do_canvasa(data,imgsSrc1) {

    //獲取canvas
var canvas = document.getElementById('canvas');
//設定寬高
//想獲取高清圖請*2，一般的直接等於Width就行
var Height = window.innerHeight*2;
    var Width = window.innerWidth*2;
//canvas繪製需要的物件
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:data.upload_img, //照片
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.14, Height*0.12, Width*0.075, 0, 360);
        ctx.clip();
        ctx.drawImage(imgs.via, Width*0.065, Height*0.07, Width*0.16, calcHeight(imgs.via, Width*0.16));
        ctx.restore();
        //暱稱5
        //顏色
ctx.fillStyle = '#fff';
        //字型設定 三個引數，font-weight font-size font-family
ctx.font = '26px microsoft yahei';
        //說明
        // (scaled-0.62)
ctx.fillText(''+data.wx_name+'', Width*0.225, Height*0.105);
        ctx.font = '24px microsoft yahei';
        ctx.fillStyle = 'red';
        ctx.textAlign="center";
        ctx.fillText(''+data.order_num+'', Width*0.34, Height*0.134);
        //照片
ctx.save();
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 20;
        ctx.lineJoin = "round";
        if(imgs.pho.height > imgs.pho.width) {
            ctx.strokeRect((Width-Height*0.3 / imgs.pho.height * imgs.pho.width)/2, (Height-Height*0.3)/2 + 80, Height*0.3 / imgs.pho.height * imgs.pho.width, Height*0.3 );
            ctx.fillRect((Width-Height*0.3 / imgs.pho.height * imgs.pho.width)/2, (Height-Height*0.3)/2 + 80, Height*0.3 / imgs.pho.height * imgs.pho.width, Height*0.3 );
            ctx.drawImage(imgs.pho, (Width-Height*0.3 / imgs.pho.height * imgs.pho.width)/2, (Height-Height*0.3)/2 + 80, Height*0.3 / imgs.pho.height * imgs.pho.width, Height*0.3);
        } else if(imgs.pho.height < imgs.pho.width){
            ctx.strokeRect((Width-Width*0.7)/2, (Height - Width*0.7 / imgs.pho.width * imgs.pho.height) / 2 + 80, Width*0.7, Width*0.7 / imgs.pho.width * imgs.pho.height);
            ctx.fillRect((Width-Width*0.7)/2, (Height - Width*0.7 / imgs.pho.width * imgs.pho.height) / 2 + 80, Width*0.7, Width*0.7 / imgs.pho.width * imgs.pho.height);
            ctx.drawImage(imgs.pho, (Width-Width*0.7)/2,(Height - Width*0.7 / imgs.pho.width * imgs.pho.height) / 2 + 80, Width*0.7, Width*0.7 / imgs.pho.width * imgs.pho.height);
        } else {
            ctx.strokeRect((Width-440)/2, (Height-Width*0.7)/2 + 120, 440, 440);
            ctx.fillRect((Width-440)/2, (Height-Width*0.7)/2 + 120, 440, 440);
            ctx.drawImage(imgs.pho, (Width-440)/2, (Height-Width*0.7)/2 + 120, 440, 440);
        }

        ctx.restore();
        //二維碼
ctx.drawImage(imgs.qrCode, (Width-Width*0.22)/2 , Height*0.76, Width*0.22, calcHeight(imgs.qrCode, Width*0.22));
        //獲取base64格式的src
var imgSrc = canvas.toDataURL('image/jpg');
        mainImg.src = imgSrc;
    }

    draw.into();

    function calcHeight(obj, w){
        return w / obj.width * obj.height;
    }

}

我為人人，人人為我；美美與共，天下大同；