js canvas實(shí)現(xiàn)二維碼和圖片合成的海報(bào)
本文實(shí)例為大家分享了canvas二維碼和圖片合成海報(bào)的具體代碼,供大家參考,具體內(nèi)容如下
思路:在微信中登錄,后臺(tái)傳來(lái)的是一個(gè)鏈接、一個(gè)名字、一張圖片。把圖片當(dāng)做背景,畫滿整個(gè)畫布。之后需要把鏈接轉(zhuǎn)為二維碼,使用jq.qrcode轉(zhuǎn)化,轉(zhuǎn)化完成后是一個(gè)canvas,把這個(gè)canvas再轉(zhuǎn)成一張圖片,畫到大的畫布上。把名字畫到畫布上。把整張畫布轉(zhuǎn)為圖片。
一、定義畫布和合成海報(bào)的img
<style type="text/css"> #canbox { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; } .canimg { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; } </style>
<div id="qrcode"> </div> <div id="canbox"> <canvas id="myCanvas" width="" height=""></canvas> </div> <img class="canimg" src=""/>
二、用jquery.qrcode把網(wǎng)址變成二維碼
后臺(tái)傳過(guò)來(lái)的是網(wǎng)址,需要轉(zhuǎn)為二維碼,二維碼也是canvas,需要把二維碼轉(zhuǎn)為圖片
$("#qrcode").qrcode({ width: 72, //寬度 height: 72, //高度 text: res.data.poster_qrcode, //任意內(nèi)容 });
三、把圖片畫到畫布上,需要占滿全屏
//畫海報(bào) var width = document.getElementById("canbox").offsetWidth; //寬度 var height = document.getElementById("canbox").offsetHeight; // 高度 var c = document.getElementById("myCanvas"); c.width = width c.height = height var ctx = c.getContext("2d"); //首先畫上背景圖 var img = new Image(); img.src = this.list.poster; img.setAttribute("crossOrigin", 'Anonymous') var x_bot = height - 44 //畫上名字 ctx.font = "19px Georgia";
//畫上二維碼 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } var mycans = $('canvas')[1];//二維碼所在的canvas var codeimg = convertCanvasToImage(mycans) var xw = width - 72 - 29 var xh = height - 6 - 72
img.onload = function() { //必須等待圖片加載完成 ctx.drawImage(img, 0, 0, width, height); //繪制圖像進(jìn)行拉伸 ctx.fillText(that.name, 28, x_bot); ctx.drawImage(codeimg, xw, xh, 72, 72); //繪制完成,轉(zhuǎn)為圖片 setTimeout(function() { //在ios上無(wú)法在畫完之后取到整個(gè)畫布內(nèi)容,加了個(gè)settimeout var bigcan = $('canvas')[0]; let images = new Image(); images.src = bigcan.toDataURL("image/png"); alert(bigcan.toDataURL("image/png")) images.setAttribute("crossOrigin", 'Anonymous') $('.canimg').attr('src', bigcan.toDataURL("image/png")) }, 0) }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法,基于回調(diào)函數(shù)實(shí)現(xiàn)該功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞實(shí)例詳解
這篇文章主要介紹了javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞的方法,實(shí)例分析了javascript實(shí)現(xiàn)小球碰撞的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07js技巧之十幾行的代碼實(shí)現(xiàn)vue.watch代碼
相信很多的用vue的人都知道vue雙向綁定的原理建立在,給屬性綁定了getter和setter,在屬性被改變的同時(shí)觸發(fā)視圖的再渲染。而本期也是借助這兩個(gè)內(nèi)置方法實(shí)現(xiàn)vue內(nèi)的watch2018-06-06詳解通用webpack多頁(yè)面自動(dòng)導(dǎo)入方案
本文主要介紹了通用webpack多頁(yè)面自動(dòng)導(dǎo)入方案,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01JavaScript對(duì)象的淺拷貝與深拷貝實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)象的淺拷貝與深拷貝,結(jié)合實(shí)例形式分析了javascript淺拷貝與深拷貝的原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-07-07JS基于ocanvas插件實(shí)現(xiàn)的簡(jiǎn)單畫板效果代碼(附demo源碼下載)
這篇文章主要介紹了JS基于ocanvas插件實(shí)現(xiàn)的簡(jiǎn)單畫板效果,結(jié)合實(shí)例形式分析了ocanvas插件實(shí)現(xiàn)畫板的相關(guān)技巧,并附代碼demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04