全百科精品资源分享
免费优质资源下载平台

利用JS的Canvas对象绘制给WordPress网站添加海报分享功能

文章目录

网上也有这个功能实现的代码,但是是通过 PHP 的 GD 库生成的,由于是后端生成,无疑会增加服务器压力,同时由于部分小伙伴配置服务器的种种问题可能会导致图像生成失败,前端在加载海报图片的过程中同样会由于图片太大导致加载缓慢的问题。由于 HTML 5 中引入 Canvas 元素,我们可以在 JavaScript 中获取 Canvas 元素来生成需要的图片。那么,什么是 Canvas ?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

第一步

引入海报生成文件

该文件是根据 Overbool 的工程项目修改的,原项目生成的海报内容个人不太喜欢,实际使用过程中发现几处代码报错,所以修改优化了下,修改的内容挺多的,具体的就不说了。

修改之后的内容为:

define(function (){
    "use strict";
    // post class
    var poster = function (){
        var DEBUG = false;
        var WIDTH = 600;
        var HEIGHT = 1200;
        function init(config){
	    var $container = document.querySelector(config.selector);
	    var $wrapper = createDom('div', 'id', 'wrapper');
	    var $canvas = createDom('canvas', 'id', 'canvas', 'block');
	    var $day = createDom('canvas', 'id', 'day');
	    var $date = createDom('canvas', 'id', 'date');
	    var $title = createDom('canvas', 'id', 'title');
	    var $content = createDom('canvas', 'id', 'content');
	    var $postmeta = createDom('canvas', 'id', 'postmeta');
	    var $description = createDom('canvas', 'id', 'description');
	    appendChilds($wrapper, $canvas, $day, $date, $title, $content, $postmeta, $description);
	    $container ? $container.appendChild($wrapper) : "";
			
	    var date = new Date(); 
	    // 日
	    var dayStyle = {
	        font: 'italic bold 80px Arial',
	        color: 'rgba(255, 255, 255, 1)',
	        position: 'left'
	    };
	    drawOneline($day, dayStyle, date.getDate()); 
	    // 年月
	    var dateStyle = {
	        font: 'normal 30px Arial',
	        color: 'rgba(255, 255, 255, 1)',
	        position: 'left'
	    };
	    drawOneline($date, dateStyle, date.getFullYear() + ' / ' + (date.getMonth() + 1)+ ' / '); 
	    // 文章标题
	    var titleStyle = {
	        font: 'normal 24px Arial',
	        color: 'rgba(66, 66, 66, 1)',
	        position: 'left'
	    };
	    titleStyle.font = config.titleStyle && config.titleStyle.font || titleStyle.font;
	    titleStyle.color = config.titleStyle && config.titleStyle.color || titleStyle.color;
	    titleStyle.position = config.titleStyle && config.titleStyle.position || titleStyle.position;
	    drawOneline($title, titleStyle, config.title); 
	    // 文章摘要
	    var contentStyle = {
	        font: '24px Arial',
	        color: 'rgba(88, 88, 88, 1)',
	        position: 'left',
	        lineHeight: 1.5,
	        maxHeight: 210
	    };
	    contentStyle.font = config.contentStyle && config.contentStyle.font || contentStyle.font;
	    contentStyle.color = config.contentStyle && config.contentStyle.color || contentStyle.color;
	    contentStyle.position = config.contentStyle && config.contentStyle.position || contentStyle.position;
	    contentStyle.lineHeight = config.contentStyle && config.contentStyle.lineHeight || contentStyle.lineHeight;
	    contentStyle.maxHeight = config.contentStyle && config.contentStyle.maxHeight || contentStyle.maxHeight;
	    drawMoreLines($content, contentStyle, config.content); 
	    // 文章Meta
	    var postmetaStyle = {
	        font: 'normal 24px Arial',
		color: 'rgba(66, 200, 120, 1)',
		position: 'left',
		lineHeight: 1.5,
		maxHeight: 72
	    };
	    postmetaStyle.font = config.postmetaStyle && config.postmetaStyle.font || postmetaStyle.font;
	    postmetaStyle.color = config.postmetaStyle && config.postmetaStyle.color || postmetaStyle.color;
	    postmetaStyle.position = config.postmetaStyle && config.postmetaStyle.position || postmetaStyle.position;
	    postmetaStyle.lineHeight = config.postmetaStyle && config.postmetaStyle.lineHeight || postmetaStyle.lineHeight;
	    postmetaStyle.maxHeight = config.postmetaStyle && config.postmetaStyle.maxHeight || postmetaStyle.maxHeight;
	    drawMoreLines($postmeta, postmetaStyle, config.postmeta); 
	    // 宣传标语
	    var descriptionStyle = {
		font: 'normal 36px Arial',
		color: 'rgba(180, 180, 180, 1)',
		position: 'center'
	    };
	    descriptionStyle.font = config.descriptionStyle && config.descriptionStyle.font || descriptionStyle.font;
	    descriptionStyle.color = config.descriptionStyle && config.descriptionStyle.color || descriptionStyle.color;
	    descriptionStyle.position = config.descriptionStyle && config.descriptionStyle.position || descriptionStyle.position;
	    drawOneline($description, descriptionStyle, config.description); 
			
	    // Logo 图标
	    var logo = new Image();
	    logo.setAttribute("crossOrigin",'Anonymous');
	    logo.src = config.logo;
	    // 特色图像
	    var banner = new Image();
	    banner.setAttribute("crossOrigin",'Anonymous');
	    banner.src = config.banner;
	    //二维码图片
	    var qrcode = new Image();
	    qrcode.src = config.qrcode;
	    // 生成海报图片
	    var onload = function onload(){
		$canvas.width = WIDTH;
		$canvas.height = HEIGHT;
				
		banner.onload = function (){
		    var ctx = $canvas.getContext('2d');
		    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
		    ctx.fillRect(0, 0, $canvas.width, $canvas.height);
		    // 绘制 Banner 图片
		    ctx.drawImage(banner, 0, 0, $canvas.width, $canvas.height / 3);
		    // 绘制灰色遮罩
		    ctx.fillStyle="#00000052";	
		    ctx.globalCompositeOperation="source-over";
		    ctx.fillRect(0, 0, $canvas.width, $canvas.height / 3);
		    // 绘制 Logo 图片
		    ctx.drawImage(logo, $canvas.width-300, 20, 280, 64);
		    // 绘制当前日期
		    ctx.drawImage($day, 150, $canvas.height / 3 - 120);
		    ctx.drawImage($date, 0, $canvas.height / 3 - 80);
		    ctx.lineWidth = 3;
		    ctx.strokeStyle = '#fff';
		    ctx.moveTo(30, $canvas.height / 3 - 40);
		    ctx.lineTo(170, $canvas.height / 3 -40);
		    ctx.stroke(); 
		    ctx.beginPath();
		    ctx.lineWidth = 5;
		    ctx.strokeStyle = '#fff';
		    ctx.moveTo(30, $canvas.height / 3 - 30);
		    ctx.lineTo(240, $canvas.height / 3 -30);
		    ctx.stroke(); 
		    // 绘制文章内容
		    ctx.drawImage($title, 10, $canvas.height / 3 + 50);
		    ctx.drawImage($content, 10, $canvas.height / 3 + 130);
		    ctx.drawImage($postmeta, 10, $canvas.height / 3 + 330);
		    // 绘制装饰线条
		    ctx.beginPath();
		    ctx.strokeStyle = '#eee';
		    //ctx.setLineDash([5, 6]);
		    ctx.moveTo(0, $canvas.height / 3 + 420);
		    ctx.lineTo(600, $canvas.height / 3 + 420);
		    ctx.stroke();
		    // 绘制二维码图片
		    ctx.drawImage(qrcode, $canvas.width/2-100, $canvas.height-320,200,200);
		    // 绘制整站描述
		    ctx.drawImage($description, 0, $canvas.height - 80,);
		    var img = new Image();
		    img.src = $canvas.toDataURL('image/png');
		    var radio = config.radio || 0.7;
		    img.width = WIDTH * radio;
		    img.height = HEIGHT * radio;
		    ctx.clearRect(0, 0, $canvas.width, $canvas.height);
		    $canvas.style.display = 'none';
		    $container ? $container.appendChild(img) : "";
		    $container ? $container.removeChild($wrapper) : "";
		    if (config.callback) {
		        config.callback($container);
		    }
		};
            };
            onload();
        }
        function createDom(name, key, value) {
	    var display = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'none';
	    var $dom = document.createElement(name);
	    $dom.setAttribute(key, value);
	    $dom.style.display = display;
	    $dom.width = WIDTH;
	    return $dom;
	}
	function appendChilds(parent) {
	    for (var _len = arguments.length, doms = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
	        doms[_key - 1] = arguments[_key];
	    }
 
	    doms.forEach(function (dom) {
		parent.appendChild(dom);
	    });
	}
	function drawOneline(canvas, style, content) {
	    var ctx = canvas.getContext('2d');
	    canvas.height = parseInt(style.font.match(/\d+/), 10) + 20;
	    ctx.font = style.font;
	    ctx.fillStyle = style.color;
	    ctx.textBaseline = 'top';
	    var lineWidth = 0;
	    var idx = 0;
	    var truncated = false;
	    for (var i = 0; i < content.length; i++) {
		lineWidth += ctx.measureText(content[i]).width;
		if (lineWidth > canvas.width - 60) {
		    truncated = true;
		    idx = i;
	            break;
		}
	    }
	    var padding = 30;
	    if (truncated) {
		content = content.substring(0, idx);
		padding = canvas.width / 2 - lineWidth / 2;
	    }
	    if (DEBUG) {
		ctx.strokeStyle = "#6fda92";
		ctx.strokeRect(0, 0, canvas.width, canvas.height);
	    }
	    if (style.position === 'center') {
		ctx.textAlign = 'center';
		ctx.fillText(content, canvas.width / 2, 0);
	    } else if (style.position === 'left') {
		ctx.fillText(content, padding, 0);
	    } else {
		ctx.textAlign = 'right';
		ctx.fillText(content, canvas.width - padding, 0);
	    }
	}
 
	function drawMoreLines(canvas, style, content) {
	    var ctx = canvas.getContext('2d');
	    var fontHeight = parseInt(style.font.match(/\d+/), 10);
	    canvas.height = style.maxHeight ? style.maxHeight : 200;
	    if (DEBUG) {
		ctx.strokeStyle = "#6fda92";
		ctx.strokeRect(0, 0, canvas.width, canvas.height);
	    }
	    ctx.font = style.font;
	    ctx.fillStyle = style.color;
	    ctx.textBaseline = 'top';
	    ctx.textAlign = 'center';
	    var alignX = 0;
	    if (style.position === 'center') {
		alignX = canvas.width / 2;
	    } else if (style.position === 'left') {
		ctx.textAlign = 'left';
		alignX = 20;
	    } else {
		ctx.textAlign = 'right';
		alignX = canvas.width - 60;
	    }
	    var lineWidth = 0;
	    var lastSubStrIndex = 0;
	    var offsetY = 0;
	    for (var i = 0; i < content.length; i++) {
		// 累加字体长度(px)
		lineWidth += ctx.measureText(content[i]).width;
		// 字体长度满一行后绘制
		if (lineWidth > canvas.width - 80) {
		    ctx.fillText(content.substring(lastSubStrIndex, i), alignX, offsetY);
		    offsetY += fontHeight * style.lineHeight;
		    lineWidth = 0;
		    lastSubStrIndex = i;
		}
		// 字体长度不足一行时绘制
		    if (i === content.length - 1) {
			ctx.fillText(content.substring(lastSubStrIndex, i + 1), alignX, offsetY);
		    }
		}
	    }
	    return {
		init: init
	    };
	}();
    return poster;
})

第二步

配置参数生成海报

生成海报的代码已经封装好了,在网站中引入该 js 文件然后调用即可。

配置JS 代码如下:

// 海报按钮 JS 代码
$('[data-event="poster-popover"]').on('click', function(){
    $('.poster-popover-mask, .poster-popover-box').fadeIn()
});
$('[data-event="poster-close"]').on('click', function(){
    $('.poster-popover-mask, .poster-popover-box').fadeOut()
});
// 海报生成
if( $('.post-poster').length ){
    require(['poster','qrcode'],function(poster,qrcode){            // 使用了 require.min.js 按需加载 JS ,如果主题未使用 RequireJS 修改为其他方式加载 jquery.qrcode.min.js 即可
        // 通过 jquery.qrcode.min.js 生成二维码
        $('.poster-qrcode').qrcode({
	    render: "canvas", 
	    width: 200,
	    height: 200,
	    text: window.location.href
        });
        var qrcanvas = $('.poster-qrcode canvas')[0];//二维码所在的canvas
        var qrcode_img = convertCanvasToImage(qrcanvas)
	function convertCanvasToImage(canvas) {
	    var canvas;
	    var image = new Image();
	    canvas ? image.src = canvas.toDataURL("image/png"): "" ;
	    return image;
	}
	// 获取文章标题
	post_title = document.title;            // 自动获取文档标题
	// 获取文章摘要信息
	post_desc = jsui.excerpt ? jsui.excerpt : '暂时没有描述信息!';            // 自动获取文章摘要信息,根据自己网站修改获取摘要方式即可
	// 获取文章Meta信息
	post_meta = '本文由『'+jsui.author+'』于〔'+jsui.update+'〕更新至《'+jsui.cat_name+'》分类目录下';            // 自动获取文章Meta信息,根据自己网站修改获取Meta方式即可
	// 获取文章特色图像
	banner_link = jsui.att_img ? jsui.att_img : document.images[0].src;            // 自动获取文章特色图像,根据自己网站修改获取特色图像方式即可
	// 获取站点描述信息
	site_desc = jsui.site_brand ? jsui.site_brand : '记录成长 分享快乐';            // 自动获取网站描述信息,根据自己网站修改获取网站描述方式即可
	poster.init({
	    selector: '.poster-popover-box',
	    // 图片链接
	    banner: banner_link,       
	    logo: jsui.logo_pure,            // 自动获取网站 Logo 图标,修改为自己网站图标地址即可
	    qrcode: qrcode_img['src'],
	    // 文章标题
	    title: post_title,
	    titleStyle:{
		font: 'bold normal 36px Arial',
		color: 'rgba(66, 66, 66, 1)',
		position: 'left',
	    },
	    //文章摘要
	    content: post_desc,
	    contentStyle:{
		font: 'italic 24px Arial',
		color: 'rgba(88, 88, 88, 1)',
		position: 'left',
		lineHeight: 1.5,
		maxHeight: 174,
	    },
	    // 文章Meta
	    postmeta: post_meta,
	    postmetaStyle:{
		font: 'normal 24px Arial',
		color: 'rgba(66, 200, 120, 1)',
		position: 'left',
		lineHeight: 1.5,
		maxHeight: 72,
	    },
	    // logo标语
	    description: site_desc,
	    descriptionStyle:{
		font: 'normal 36px Arial',
		color: 'rgba(200, 200, 200, 1)',
		position: 'center'
	    },
	    
	    callback: posterDownload
	});
		
	function posterDownload(container){
	    if(container == null) {return;}
	    const $btn = container.querySelector('.poster-download')
	    const $img = container.querySelector('img')
	    $btn.setAttribute('href', $img.getAttribute('src'));
	};
    });
};

代码中基本已经注释每个配置项目的含义了,就不再细说了。需要注意的是由于海报中的二维码使用了 jquery 的 qrcode 插件生成,所以你需要确保网页中引入了 jquery.qrcode.min.js 文件。

jquery.qrcode.min.js代码如下:

(function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataCache=null;this.dataList=[]}function q(a,c){if(void 0==a.length)throw Error(a.length+"/"+c);for(var d=0;d<a.length&&0==a[d];)d++;this.num=Array(a.length-d+c);for(var b=0;b<a.length-d;b++)this.num[b]=a[b+d]}function p(a,c){this.totalCount=a;this.dataCount=c}function t(){this.buffer=[];this.length=0}u.prototype={getLength:function(){return this.data.length},
write:function(a){for(var c=0;c<this.data.length;c++)a.put(this.data.charCodeAt(c),8)}};o.prototype={addData:function(a){this.dataList.push(new u(a));this.dataCache=null},isDark:function(a,c){if(0>a||this.moduleCount<=a||0>c||this.moduleCount<=c)throw Error(a+","+c);return this.modules[a][c]},getModuleCount:function(){return this.moduleCount},make:function(){if(1>this.typeNumber){for(var a=1,a=1;40>a;a++){for(var c=p.getRSBlocks(a,this.errorCorrectLevel),d=new t,b=0,e=0;e<c.length;e++)b+=c[e].dataCount;
for(e=0;e<this.dataList.length;e++)c=this.dataList[e],d.put(c.mode,4),d.put(c.getLength(),j.getLengthInBits(c.mode,a)),c.write(d);if(d.getLengthInBits()<=8*b)break}this.typeNumber=a}this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17;this.modules=Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=Array(this.moduleCount);for(var b=0;b<this.moduleCount;b++)this.modules[d][b]=null}this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-
7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(a,c);7<=this.typeNumber&&this.setupTypeNumber(a);null==this.dataCache&&(this.dataCache=o.createData(this.typeNumber,this.errorCorrectLevel,this.dataList));this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,c){for(var d=-1;7>=d;d++)if(!(-1>=a+d||this.moduleCount<=a+d))for(var b=-1;7>=b;b++)-1>=c+b||this.moduleCount<=c+b||(this.modules[a+d][c+b]=
0<=d&&6>=d&&(0==b||6==b)||0<=b&&6>=b&&(0==d||6==d)||2<=d&&4>=d&&2<=b&&4>=b?!0:!1)},getBestMaskPattern:function(){for(var a=0,c=0,d=0;8>d;d++){this.makeImpl(!0,d);var b=j.getLostPoint(this);if(0==d||a>b)a=b,c=d}return c},createMovieClip:function(a,c,d){a=a.createEmptyMovieClip(c,d);this.make();for(c=0;c<this.modules.length;c++)for(var d=1*c,b=0;b<this.modules[c].length;b++){var e=1*b;this.modules[c][b]&&(a.beginFill(0,100),a.moveTo(e,d),a.lineTo(e+1,d),a.lineTo(e+1,d+1),a.lineTo(e,d+1),a.endFill())}return a},
setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(a=8;a<this.moduleCount-8;a++)null==this.modules[6][a]&&(this.modules[6][a]=0==a%2)},setupPositionAdjustPattern:function(){for(var a=j.getPatternPosition(this.typeNumber),c=0;c<a.length;c++)for(var d=0;d<a.length;d++){var b=a[c],e=a[d];if(null==this.modules[b][e])for(var f=-2;2>=f;f++)for(var i=-2;2>=i;i++)this.modules[b+f][e+i]=-2==f||2==f||-2==i||2==i||0==f&&0==i?!0:!1}},setupTypeNumber:function(a){for(var c=
j.getBCHTypeNumber(this.typeNumber),d=0;18>d;d++){var b=!a&&1==(c>>d&1);this.modules[Math.floor(d/3)][d%3+this.moduleCount-8-3]=b}for(d=0;18>d;d++)b=!a&&1==(c>>d&1),this.modules[d%3+this.moduleCount-8-3][Math.floor(d/3)]=b},setupTypeInfo:function(a,c){for(var d=j.getBCHTypeInfo(this.errorCorrectLevel<<3|c),b=0;15>b;b++){var e=!a&&1==(d>>b&1);6>b?this.modules[b][8]=e:8>b?this.modules[b+1][8]=e:this.modules[this.moduleCount-15+b][8]=e}for(b=0;15>b;b++)e=!a&&1==(d>>b&1),8>b?this.modules[8][this.moduleCount-
b-1]=e:9>b?this.modules[8][15-b-1+1]=e:this.modules[8][15-b-1]=e;this.modules[this.moduleCount-8][8]=!a},mapData:function(a,c){for(var d=-1,b=this.moduleCount-1,e=7,f=0,i=this.moduleCount-1;0<i;i-=2)for(6==i&&i--;;){for(var g=0;2>g;g++)if(null==this.modules[b][i-g]){var n=!1;f<a.length&&(n=1==(a[f]>>>e&1));j.getMask(c,b,i-g)&&(n=!n);this.modules[b][i-g]=n;e--; -1==e&&(f++,e=7)}b+=d;if(0>b||this.moduleCount<=b){b-=d;d=-d;break}}}};o.PAD0=236;o.PAD1=17;o.createData=function(a,c,d){for(var c=p.getRSBlocks(a,
c),b=new t,e=0;e<d.length;e++){var f=d[e];b.put(f.mode,4);b.put(f.getLength(),j.getLengthInBits(f.mode,a));f.write(b)}for(e=a=0;e<c.length;e++)a+=c[e].dataCount;if(b.getLengthInBits()>8*a)throw Error("code length overflow. ("+b.getLengthInBits()+">"+8*a+")");for(b.getLengthInBits()+4<=8*a&&b.put(0,4);0!=b.getLengthInBits()%8;)b.putBit(!1);for(;!(b.getLengthInBits()>=8*a);){b.put(o.PAD0,8);if(b.getLengthInBits()>=8*a)break;b.put(o.PAD1,8)}return o.createBytes(b,c)};o.createBytes=function(a,c){for(var d=
0,b=0,e=0,f=Array(c.length),i=Array(c.length),g=0;g<c.length;g++){var n=c[g].dataCount,h=c[g].totalCount-n,b=Math.max(b,n),e=Math.max(e,h);f[g]=Array(n);for(var k=0;k<f[g].length;k++)f[g][k]=255&a.buffer[k+d];d+=n;k=j.getErrorCorrectPolynomial(h);n=(new q(f[g],k.getLength()-1)).mod(k);i[g]=Array(k.getLength()-1);for(k=0;k<i[g].length;k++)h=k+n.getLength()-i[g].length,i[g][k]=0<=h?n.get(h):0}for(k=g=0;k<c.length;k++)g+=c[k].totalCount;d=Array(g);for(k=n=0;k<b;k++)for(g=0;g<c.length;g++)k<f[g].length&&
(d[n++]=f[g][k]);for(k=0;k<e;k++)for(g=0;g<c.length;g++)k<i[g].length&&(d[n++]=i[g][k]);return d};s=4;for(var j={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,
78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var c=a<<10;0<=j.getBCHDigit(c)-j.getBCHDigit(j.G15);)c^=j.G15<<j.getBCHDigit(c)-j.getBCHDigit(j.G15);return(a<<10|c)^j.G15_MASK},getBCHTypeNumber:function(a){for(var c=a<<12;0<=j.getBCHDigit(c)-
j.getBCHDigit(j.G18);)c^=j.G18<<j.getBCHDigit(c)-j.getBCHDigit(j.G18);return a<<12|c},getBCHDigit:function(a){for(var c=0;0!=a;)c++,a>>>=1;return c},getPatternPosition:function(a){return j.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,c,d){switch(a){case 0:return 0==(c+d)%2;case 1:return 0==c%2;case 2:return 0==d%3;case 3:return 0==(c+d)%3;case 4:return 0==(Math.floor(c/2)+Math.floor(d/3))%2;case 5:return 0==c*d%2+c*d%3;case 6:return 0==(c*d%2+c*d%3)%2;case 7:return 0==(c*d%3+(c+d)%2)%2;default:throw Error("bad maskPattern:"+
a);}},getErrorCorrectPolynomial:function(a){for(var c=new q([1],0),d=0;d<a;d++)c=c.multiply(new q([1,l.gexp(d)],0));return c},getLengthInBits:function(a,c){if(1<=c&&10>c)switch(a){case 1:return 10;case 2:return 9;case s:return 8;case 8:return 8;default:throw Error("mode:"+a);}else if(27>c)switch(a){case 1:return 12;case 2:return 11;case s:return 16;case 8:return 10;default:throw Error("mode:"+a);}else if(41>c)switch(a){case 1:return 14;case 2:return 13;case s:return 16;case 8:return 12;default:throw Error("mode:"+
a);}else throw Error("type:"+c);},getLostPoint:function(a){for(var c=a.getModuleCount(),d=0,b=0;b<c;b++)for(var e=0;e<c;e++){for(var f=0,i=a.isDark(b,e),g=-1;1>=g;g++)if(!(0>b+g||c<=b+g))for(var h=-1;1>=h;h++)0>e+h||c<=e+h||0==g&&0==h||i==a.isDark(b+g,e+h)&&f++;5<f&&(d+=3+f-5)}for(b=0;b<c-1;b++)for(e=0;e<c-1;e++)if(f=0,a.isDark(b,e)&&f++,a.isDark(b+1,e)&&f++,a.isDark(b,e+1)&&f++,a.isDark(b+1,e+1)&&f++,0==f||4==f)d+=3;for(b=0;b<c;b++)for(e=0;e<c-6;e++)a.isDark(b,e)&&!a.isDark(b,e+1)&&a.isDark(b,e+
2)&&a.isDark(b,e+3)&&a.isDark(b,e+4)&&!a.isDark(b,e+5)&&a.isDark(b,e+6)&&(d+=40);for(e=0;e<c;e++)for(b=0;b<c-6;b++)a.isDark(b,e)&&!a.isDark(b+1,e)&&a.isDark(b+2,e)&&a.isDark(b+3,e)&&a.isDark(b+4,e)&&!a.isDark(b+5,e)&&a.isDark(b+6,e)&&(d+=40);for(e=f=0;e<c;e++)for(b=0;b<c;b++)a.isDark(b,e)&&f++;a=Math.abs(100*f/c/c-50)/5;return d+10*a}},l={glog:function(a){if(1>a)throw Error("glog("+a+")");return l.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;256<=a;)a-=255;return l.EXP_TABLE[a]},EXP_TABLE:Array(256),
LOG_TABLE:Array(256)},m=0;8>m;m++)l.EXP_TABLE[m]=1<<m;for(m=8;256>m;m++)l.EXP_TABLE[m]=l.EXP_TABLE[m-4]^l.EXP_TABLE[m-5]^l.EXP_TABLE[m-6]^l.EXP_TABLE[m-8];for(m=0;255>m;m++)l.LOG_TABLE[l.EXP_TABLE[m]]=m;q.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var c=Array(this.getLength()+a.getLength()-1),d=0;d<this.getLength();d++)for(var b=0;b<a.getLength();b++)c[d+b]^=l.gexp(l.glog(this.get(d))+l.glog(a.get(b)));return new q(c,0)},mod:function(a){if(0>
this.getLength()-a.getLength())return this;for(var c=l.glog(this.get(0))-l.glog(a.get(0)),d=Array(this.getLength()),b=0;b<this.getLength();b++)d[b]=this.get(b);for(b=0;b<a.getLength();b++)d[b]^=l.gexp(l.glog(a.get(b))+c);return(new q(d,0)).mod(a)}};p.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],
[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,
116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,
43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,
3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,
55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,
45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]];p.getRSBlocks=function(a,c){var d=p.getRsBlockTable(a,c);if(void 0==d)throw Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+c);for(var b=d.length/3,e=[],f=0;f<b;f++)for(var h=d[3*f+0],g=d[3*f+1],j=d[3*f+2],l=0;l<h;l++)e.push(new p(g,j));return e};p.getRsBlockTable=function(a,c){switch(c){case 1:return p.RS_BLOCK_TABLE[4*(a-1)+0];case 0:return p.RS_BLOCK_TABLE[4*(a-1)+1];case 3:return p.RS_BLOCK_TABLE[4*
(a-1)+2];case 2:return p.RS_BLOCK_TABLE[4*(a-1)+3]}};t.prototype={get:function(a){return 1==(this.buffer[Math.floor(a/8)]>>>7-a%8&1)},put:function(a,c){for(var d=0;d<c;d++)this.putBit(1==(a>>>c-d-1&1))},getLengthInBits:function(){return this.length},putBit:function(a){var c=Math.floor(this.length/8);this.buffer.length<=c&&this.buffer.push(0);a&&(this.buffer[c]|=128>>>this.length%8);this.length++}};"string"===typeof h&&(h={text:h});h=r.extend({},{render:"canvas",width:256,height:256,typeNumber:-1,
correctLevel:2,background:"#ffffff",foreground:"#000000"},h);return this.each(function(){var a;if("canvas"==h.render){a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();var c=document.createElement("canvas");c.width=h.width;c.height=h.height;for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),f=0;f<a.getModuleCount();f++)for(var i=0;i<a.getModuleCount();i++){d.fillStyle=a.isDark(f,i)?h.foreground:h.background;var g=Math.ceil((i+1)*b)-Math.floor(i*b),
j=Math.ceil((f+1)*b)-Math.floor(f*b);d.fillRect(Math.round(i*b),Math.round(f*e),g,j)}}else{a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();c=r("<table></table>").css("width",h.width+"px").css("height",h.height+"px").css("border","0px").css("border-collapse","collapse").css("background-color",h.background);d=h.width/a.getModuleCount();b=h.height/a.getModuleCount();for(e=0;e<a.getModuleCount();e++){f=r("<tr></tr>").css("height",b+"px").appendTo(c);for(i=0;i<a.getModuleCount();i++)r("<td></td>").css("width",
d+"px").css("background-color",a.isDark(e,i)?h.foreground:h.background).appendTo(f)}}a=c;jQuery(a).appendTo(this)})}})(jQuery);

第三步

CSS样式代码如下:

.share-like-reward .post-poster{
	float: right;
	display: inline-block;
	height: 24px;
	margin: 0 5px;
	border: 1px solid #03b303;
	padding: 0 7px;
	border-radius: 5px;
	font-size: 12px;
	text-align: center;
	line-height: 22px;
}
.share-like-reward .post-poster a{
	color: #03b303;
}
.share-like-reward .poster-popover-mask{
	display: none;
	z-index: 99;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #00000066;
}
.share-like-reward .poster-popover-box{
	display: none;
	z-index: 999;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 300px;
	height: 600px;
	margin: auto;
	border: 1px solid #999;
	border-radius: 9px;
	padding: 15px;
	background: #fafafa;
	overflow: hidden;
}
.share-like-reward .poster-popover-box img{
	width: 100%;
	height: 100%;
}
.share-like-reward .poster-popover-box a{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border: 0;
	border-radius: 5px;
	padding: 5px 9px;
	width: 100px;
	height: 30px;
	color: #fff;
}
.rewards-popover-mask{
	z-index: 999;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.rewards-popover-box{
	z-index: 9999;
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 550px;
	margin: -200px 0 0 -275px;
	padding: 40px 20px 50px;
	border-radius: 4px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	text-align: center;
	background-color: #FFF;
	overflow: hidden;
}
.rewards-popover-box h3{
	margin: 0 15px 30px;
	padding: 0;
	border: 0;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background: none;
}
.rewards-popover-item{
	display: inline-block;
	width: 200px;
	margin: 0 20px;
}
.rewards-popover-item h4{
	margin: 0 20px 10px;
	border: 0;
	padding: 0;
	font-size: 15px;
	background: none;
}
.rewards-popover-item img{
	width: 200px;
	height: 200px;
	background-color: #eee;
	border-radius: 2px;
	padding: 5px;
}
.rewards-popover-close{
	position: absolute;
	top: 0;
	right: 0;
	padding: 15px;
	font-size: 16px;
	line-height: 1;
	color: #999;
	cursor: pointer;
}
.rewards-popover-close&:hover{
	color: #666;
}

@media (max-width:768px){
	.share-like-reward .post-share{
		width: 100%;
		margin-bottom: 10px;
	}
	.post-actions{padding-bottom: 0;}
	.post-actions .action{padding: 10px 14px;margin: 0 2px;}
    .rewards-popover-box{width:300px;margin-left:-150px;margin-top:-125px;padding:30px 10px;}
    .rewards-popover-box h3{font-size:16px;margin:0 5px 15px;}
    .rewards-popover-item{width:125px;margin:0 5px;}
    .rewards-popover-item h4{font-size:12px;margin:0 0 10px;}
    .rewards-popover-item img{width:125px;height:125px;}
}

第四步

前端调用弹窗海报

配置好上面步骤后基本上就可以生成海报图片了,但是我们需要将其从前端显示出来,

在需要显示的地方添加如下代码即可:

<!-- 海报 -->
<div class="post-poster action action-poster">
    <a href="javascript:;" class="item" data-event="poster-popover">
	<i class="fa fa-paper-plane"></i><span>&nbsp;生成海报</span>
    </a>
    <div class="poster-qrcode" style="display:none;"></div>
    <div class="poster-popover-mask" data-event="poster-close"></div>
    <div class="poster-popover-box">
	<a class="poster-download btn btn-default" download="<?php echo get_the_id();?>.jpg">    // 这里是下载图片的名称,为了方便我通过 WordPress 的 get_the_id() 函数自动获取的文章ID,你可能需要修改为固定值
	    <span>下载海报</span>
	</a>
    </div>		
</div>

 

Download WordPress Themes Free
Download WordPress Themes
Free Download WordPress Themes
Download WordPress Themes
free download udemy course
download karbonn firmware
Download Nulled WordPress Themes
download udemy paid course for free

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 利用JS的Canvas对象绘制给WordPress网站添加海报分享功能

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址