Ideas: vue pictures merger
First, two-dimensional code is ready to be merged background, and requests are after,
canvas drawing, the two background images and a two-dimensional code with a canvas drawn,
The canvas and then converted img
Note the canvas and the picture is clear diagrams and pictures of the size of the position
At the beginning of canvas is hidden, two background image is displayed, and when the unfinished canvas and then turned img, hiding canvas and background image, display canvas transfer finished picture (that is, the combined picture)
This adaptation may be some way defective, it will add a lot of judgment equipment
Code:
html
<div class="wap-poster" ref="imageWrapper" id="target" style="width: 100%;"> <canvas id="mycanvas" width="100%" height="100%" v-if="!infactQrCode" style="transform: scale(2);display: none"></canvas> <img v-if="!infactQrCode" src="../../../assets/imgs/posterbg.jpg" id="bgImg" alt="" style="width: 100%;height:100%;"> <img v-if="!infactQrCode" src="../../../assets/imgs/poster0.png" id="poster" alt="" style="position: absolute;"> <img v-if="!infactQrCode" id="qrcode" :src="qrCodeImg" alt="" style="position: absolute;top:247px;width: 140px;height: 140px;display: none"> <img :src="infactQrCode" alt="" v-if="infactQrCode" style="width: 100%;height:100%"> </div>
js<script>
import html2canvas from 'html2canvas' export default { name: 'Poster', data() { return { qrCodeImg: "", infactQrCode:"", } }, created(){
//二维码图片后台返回 this.qrCodeImg="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568183940&di=49b7187fdb7fee3e30c20583150f09b6&imgtype=jpg&er=1&src=http%3A%2F%2Fdown.admin5.com%2Fuploads%2Fallimg%2F170630%2F2160_170630144656_1.jpg"; }, methods: { drawImg(){ let _self=this; var canvas = document.getElementById("mycanvas"); var a = setInterval(() =>{ // 重复获取 canvas = document.getElementById("mycanvas"); if(!canvas){ return false } else { clearInterval(a); var context = canvas.getContext('2d'); context.scale ( 2 , 2 rear) // picture clarity solution, scaling twice, other than the image width and height are also high by ui design width 2 var img = new new Image (); img.setAttribute ( ' the crossOrigin ' , ' Anonymous ' ); the let bgUrl = document.getElementById ( " bgImg " ) .src; img.src = bgUrl; img.onload = function () { IF (img.complete) {
// first bACKGROUND Videos pictures, pictures of width and height hold over the entire screen context.drawImage (img, 0, 0 , window.screeWidth, window.screeHeight); var IMG1 = new new Image (); the let bgUrl1 = document.getElementById ( " Poster " ); img1.src = bgUrl1.src; img1.setAttribute ( ' the crossOrigin ' , ' Anonymous ' ); img1.onload = function () {
// IMG1 background image for the first two, the second start drawing FIG. 2, the positioning of the image, left to fit the ratio of the entire screen image width * -ui design image, Finally, divide by 2 to ensure the picture is centered,
// pictures left top width height are calculated in this way,
IF(img1.complete){ var left = (window.screeWidth-600*window.rateWidth)/2; if(window.screeHeight>=812&&window.screeWidth<768){ //iphonx的计算方式 context.drawImage(img1,left,200*window.rateWidth,600*window.rateWidth,890*window.rateHeight); }else{ context.drawImage(img1,left,110*window.rateWidth,600*window.rateWidth,1100*window.rateHeight); } var img2 = new Image(); img2.src=document.getElementById("qrcode").src; img2.crossOrigin="*"; img2.onload = function(){ if(img2.complete){
//二维码图片的画图left top widht height var left = (window.screeWidth-290*window.rateWidth)/2; if(window.screeWidth==600&&window.screeHeight==1024){ //ipad var left = (window.screeWidth-240*window.rateWidth)/2; context.drawImage(img2,left,460*window.rateHeight,240*window.rateWidth,240*window.rateWidth); var image = new Image(); _self.infactQrCode=canvas.toDataURL("image/png"); return } if(window.screeWidth>=768&&window.screeHeight>812){ //其他设备 var left = (window.screeWidth-230*window.rateWidth)/2; context.drawImage(img2,left,430*window.rateHeight,230*window.rateWidth,230*window.rateWidth); }else if (window.screeHeight>=812&&window.screeWidth<768){ context.drawImage(img2,left,410*window.rateHeight,290*window.rateWidth,290*window.rateWidth); } The else { context.drawImage (IMG2, left, 410 * window.rateHeight, 290 is * window.rateWidth, 290 is * window.rateWidth); }
// 2 or more for the background image and the drawing, and a two-dimensional code incorporated into the canvas as a result, the following picture to the canvas into a method var image = new new image (); _self.infactQrCode = canvas.toDataURL ( " image / PNG " ); } } } } } } } }, . 1 ) }, }, Mounted () { the this .drawImg (); // then the primary code method, the picture into canvas, canvas and then converted to images, as canvas is not a long press to save the two-dimensional code and the identification const that = the this ; window.screeWidth = window.innerWidth document.documentElement.clientWidth || || document.body.clientWidth; window.screeHeight = window.innerHeight || || document.documentElement.clientHeight document.body.clientHeight; var left = (window.screeWidth- 140 ) / 2 ; var qrcode = document.getElementById ( " qrcode " ); qrcode.style.left=left+'px'; this.screeWidth=window.screeWidth; var canvas = document.getElementById("mycanvas");
//适配 window.rateWidth = window.screeWidth/ 750; window.rateHeight = window.screeHeight/1334;
//清晰度解决办法 canvas.setAttribute("width",window.screeWidth*2); canvas.setAttribute("height",window.screeHeight*2);
let bgUrl1=document.getElementById("poster"); var left = (window.screeWidth-600*window.rateWidth)/2; if(window.screeHeight>=812&&window.screeWidth<768){ bgUrl1.style.left=left+"px"; bgUrl1.style.top=200*window.rateWidth+"px"; bgUrl1.style.width=600*window.rateWidth+"px"; bgUrl1.style.height=890*window.rateHeight+"px"; }else{ bgUrl1.style.left=left+"px"; bgUrl1.style.top=110*window.rateWidth+"px"; bgUrl1.style.width=600*window.rateWidth+"px"; bgUrl1.style.height=1100*window.rateHeight+"px"; } }, } </script>
