canvas 图片跨域 +海报生成+二维码

在项目中,需要生成海报。有动态信息(微信头像、微信昵称、上传图片(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: 奔跑吧笨笨

* 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">

   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 生成海报  参数一:微信头像、微信昵称等    参数二:二维码

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() {//图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url)

// $(".loading").removeClass("displaynone");

        },

// $(".loading").addClass("displaynone");

        },

//确定

        done:function(dataURL) {//裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。

// console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理

            newImg = dataURL;

canvasImg();

$('#cutImg').fadeOut();

$('.dialog').fadeIn();

$(".pos").fadeIn();

}

});

//取消

    $('.back').on('click',function(){

$('#cutImg').fadeOut();

});

function canvasImg(){

//获取canvas

        var canvas =document.getElementById('canvas');

//设置宽高

//想获取高清图请*2,一般的直接等于Width就行

        var Height =window.innerHeight*2;

var Width =window.innerWidth*2;

//canvas绘制需要的对象

// 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';

//字体设置 三个参数,font-weight font-size font-family

            ctx.font ='26px microsoft yahei';

//说明

// (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 图片跨域

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,597评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,849评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,445评论 0 4
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,002评论 0 2
  • 啥是canvas? HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过, 元素本身...
    kiaizi阅读 720评论 0 4