canvas基础学习【澳门金莎娱乐网站】

日期:2019-12-17编辑作者:服务器

率先呢,先给特效。本人找手提式有线话机录的,有一点不明了,请见谅!

canvas底子学习(二),canvas基本功学习

后生可畏、图像绘制

canvas绘制图像的法子是ctx.drawImage(卡塔尔(قطر‎;该办法有二种选拔办法

1、ctx.drawImage(img,x,y);

img是指图像对象,x和y分别是那么些图像左上角在canvas画布的坐标,而图像突显的轻重为图像本人的像素值,超过canvas画布的片段不出示。

2、ctx.drawImage(img,x,y,w,h);

和方面的特别函数相比较,可以调整图像在canvas中显得的宽窄和可观,而不再是图表自己的高宽像素

3、ctx.drawImage(img , dx , dy , dw , dh , x , y , w , h);

那一个又比早前的函数多了dx、dy、dw、dh那多个参数,这多个参数能够调整图片切成块突显在canvas画布中。在图纸上亦然以左上角为原点,向右为X轴正方向,向下为Y轴正方向,那多少个参数表示,在图片中在(dx,dy卡塔尔国这些坐标,切dw和dh大小的切丝。然后将以此切成片呈现在canvas画布上。

谈起底那么些img参数,不单单能够是Image对象,还可以是video对象,也足以是此外的canvas对象。所以能够经过该办法对video录像进行截屏,也足以透过加载canvas制作图像水印、火镜、以致天猫双11主会议室那样的特效,叁个canvas加载另八个canvas,也被称之为canvas的离屏工夫。

 

二、图像的像素级管理

1、ctx.getImageData(x , y , w , h);

那么些法子是赢得画布(x,y卡塔尔坐标,宽高分别为w和h的像素对象。而以此目的的data属性,则是其rgba的值。多少个画布的像素值是从画布的原点,从左向右,从上到下,一排一排的排列下来的。常用抽取canvas像素值的不二诀窍有二种,大器晚成种是利用大器晚成层循环,另一种是接收重复for循环,代码如下:

var imageData = ctx.getImageData(0 , 0 , canvasW , canvasH),
      pixelData = imageData.data;
//方式一
for(var i = 0; i < canvasH*canvasW ; i++){
    var  r = pixelData[4*i + 0],
          g = pixelData[4*i + 1],
          b = pixelData[4*i + 2],
              a = pixelData[4*i + 3];
} 
//方式二
for(var y = 0 ; i < canvasH  ; y++){
   for(var x = 0 ; x < canvasW ; x++){
      var pixe = canvasW*y + x,
          r = pixelData[4*pixe + 0],
          g = pixelData[4*pixe + 1],
          b = pixelData[4*pixe + 2],
          a = pixelData[4*pixe + 3];
    }
}

 

2、ctx.putImageData()

该办法是设置canvas画布上的像素数量,它有八个参数,在w3c上是如此解释的

澳门金莎娱乐网站 1

 笔者的明白正是将imgData,放在画布上的职责是(x + dirtyX , y + dirtyY卡塔尔(英语:State of Qatar),高宽分别是dirtyHeight、dirtyWidth的矩形。

 

三、代码demo

1、图片缩放,以致像素调换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图像学习</title>
        <style>
            #main,#copy,.contain{
                margin: 15px;
                padding: 0;
                float: left;

            }
            #main{
                cursor:move
            }
            .contain *{
                padding: 2px;
                margin: 0;
z            }
            .contain a{
                display: block;
                text-align: center; 
                margin-top:5px;
                font-size:15px;
                line-height: 20px;
            }
        </style>
    </head>
    <body>
        <canvas id="main" width="400" height="300" style="display:block;border: 1px solid #AAA;">
            亲,您的浏览器不支持canvas
        </canvas>
        <div class="contain" style="width: 290px;height: 300px;">
            <div>
                缩放
                <input type="range" id="scaleChange" min="0.5" max="4.0" step="0.03" value="1.0" 
                    style="display:inline-block;width: 240px;"/>
            </div>
            <a href="javascript:void(0)" id="greyChange">灰度转换</a>
            <a href="javascript:void(0)" id="blackChange">黑度转换</a>
            <a href="javascript:void(0)" id="reverChange">反相转换</a>
            <a href="javascript:void(0)" id="blurChange">模糊处理</a>
            <a href="javascript:void(0)" id="mosaicChange">马赛克处理</a>
        </div>
        <canvas id="copy" width="400" height="300" style="display:block;border: 1px solid #AAA;">
            亲,您的浏览器不支持canvas
        </canvas>
        <canvas id="waterMark" style="display: none;">    
              亲,您的浏览器不支持canvas
              <!--
                      水印作图的canvas,把一个canvas载入另一个canvas的做法叫做,离屏canvas
              -->
        </canvas>
    </body>
    <script>
        document.body.onload = function(){
            var canvas = document.getElementById("main"),
                scaleChange = document.getElementById("scaleChange"),
                copyCanvas = document.getElementById("copy"),
                waterMarkCanvas = document.getElementById("waterMark"),
                ctx = canvas.getContext("2d"),
                copyCtx = copyCanvas.getContext("2d"),
                canvasW = canvas.width,
                canvasH = canvas.height;
            var img = new Image();
            img.src = "img.jpg";
            img.onload = function(){        //当图片加载完毕后,执行canvas画图函数
                init();
            }
            //用于初始化
            function init(){
                toolFunc.handleWaterMark();
                toolFunc.handleScale();
                toolFunc.drawImg();
                toolFunc.handleEffect();
                toolFunc.handleCanvasMove();
            }
            var toolFunc = {
                scaleImgX : 0,
                scaleImgY : 0,
                drawImg : function(moveX , moveY){    //绘制图片
                    var scale = scaleChange.value;
                        //根据比例计算缩放后图像的大小
                        var imgW = canvasW*scale,
                            imgH = canvasH*scale,
                            x = (canvasW - imgW)/2,
                            y = (canvasH - imgH)/2,
                            tempX = x , tempY = y;
                        if(moveX || moveY){
                            x = this.scaleImgX + moveX;
                            y = this.scaleImgY + moveY;
                            if(x >= 0 || y >= 0 || x <= 2*tempX || y <= 2*tempY){
                                return;
                            }
                        }
                        ctx.clearRect(0 , 0 , canvasW , canvasH);
                        ctx.drawImage(img , x , y , imgW , imgH);
                        ctx.drawImage(waterMarkCanvas , 
                            canvasW - waterMarkCanvas.width ,
                            canvasH - waterMarkCanvas.height ,
                            waterMarkCanvas.width , waterMarkCanvas.height);
                        this.scaleImgX = x;
                        this.scaleImgY = y;
                },
                handleWaterMark : function(){        //用于处理水印
                    waterMarkCanvas.width = 200;
                    waterMarkCanvas.height = 70;
                    var waterCtx = waterMarkCanvas.getContext("2d");
                    waterCtx.font = "bold 20px Arial";
                    waterCtx.lineWidth = 1;
                    waterCtx.fillStyle = "white";
                    waterCtx.textAlign = "center";
                    waterCtx.textBaseline = "middle";
                    waterCtx.fillText( "~!~ sky ~!~" , 140 , 50 , waterMarkCanvas.width);
                },
                handleScale : function(){        //用于处理缩放
                    var isScale = false,
                        _this = this;
                    scaleChange.onmousedown = function(){
                        isScale = true;
                    }
                    scaleChange.onmousemove = function(){
                        if(isScale){        //画图
                            _this.drawImg();
                        }
                    }
                    scaleChange.onmouseup = function(){
                        isScale = false;
                    }
                },
                handleEffect : function(){    //处理效果变换
                    var imageData,pixelData;
                    document.getElementById("greyChange").onclick = function(){        //灰度变换
                        imageData = ctx.getImageData(0 , 0 , canvasW , canvasH);
                        pixelData = imageData.data;
                        for(var i = 0; i < canvasH*canvasW ; i++){
                            var r = pixelData[4*i + 0],
                                g = pixelData[4*i + 1],
                                b = pixelData[4*i + 2],
                                grey = r*0.3+g*0.59+b*0.11;//此为灰度图像的算法
                            pixelData[4*i + 0] = grey;
                            pixelData[4*i + 1] = grey;
                            pixelData[4*i + 2] = grey;
                        }
                        copyCtx.putImageData(imageData,0,0,0,0,canvasW,canvasH);
                    }
                    document.getElementById("blackChange").onclick = function(){        //黑度变换
                        imageData = ctx.getImageData(0 , 0 , canvasW , canvasH);
                        pixelData = imageData.data;
                        for(var i = 0; i < canvasH*canvasW ; i++){
                            var r = pixelData[4*i + 0],
                                g = pixelData[4*i + 1],
                                b = pixelData[4*i + 2],
                                grey = (function(n){        //黑度图像就只有黑白两色
                                    if(n > 127){
                                        return 255;
                                    }else{
                                        return 0;
                                    }
                                })(r*0.3+g*0.59+b*0.11);
                            pixelData[4*i + 0] = grey;
                            pixelData[4*i + 1] = grey;
                            pixelData[4*i + 2] = grey;
                        }
                        copyCtx.putImageData(imageData,0,0,0,0,canvasW,canvasH);
                    }
                    document.getElementById("reverChange").onclick = function(){        //反向变换
                        imageData = ctx.getImageData(0 , 0 , canvasW , canvasH);
                        pixelData = imageData.data;
                        for(var i = 0; i < canvasH*canvasW ; i++){
                            var r = pixelData[4*i + 0],
                                g = pixelData[4*i + 1],
                                b = pixelData[4*i + 2];
                            pixelData[4*i + 0] = 255 - r;
                            pixelData[4*i + 1] = 255 - g;
                            pixelData[4*i + 2] = 255 - b;
                        }
                        copyCtx.putImageData(imageData,0,0,0,0,canvasW,canvasH);
                    }
                    document.getElementById("blurChange").onclick = function(){        //模糊处理
                        imageData = ctx.getImageData(0 , 0 , canvasW , canvasH);
                        pixelData = imageData.data;
                        var pixelTmpData = pixelData;    //作为一个备份数据
                        var r = 3 , totalNum = (2*r + 1)*(2*r + 1);    //去上下左右四个方向各3个像素点的平均值
                        for(var i = r ; i < canvasH - r ; i++){
                            for(var j = r ; j < canvasW - r; j++){
                                var totalR,totalG,totalB;
                                totalR = totalG = totalB = 0;
                                for(var m = -r ; m <= r ; m++){
                                    for(var n = -r ; n <= r ; n++){
                                        var pixeY = i + m , piexX = j + n,
                                            pixe = canvasW*pixeY + piexX;
                                        totalR += pixelTmpData[4*pixe + 0];
                                        totalG += pixelTmpData[4*pixe + 1];
                                        totalB += pixelTmpData[4*pixe + 2];
                                    }
                                }
                                var p = i*canvasW + j;
                                pixelData[4*p + 0] = totalR/totalNum;
                                pixelData[4*p + 1] = totalG/totalNum;
                                pixelData[4*p + 2] = totalB/totalNum;
                            }
                        }
                        copyCtx.putImageData(imageData,0,0,0,0,canvasW,canvasH);
                    }
                    document.getElementById("mosaicChange").onclick = function(){    //马赛克处理
                        imageData = ctx.getImageData(0 , 0 , canvasW , canvasH);
                        pixelData = imageData.data;
                        var pixelTmpData = pixelData;    //作为一个备份数据
                        var size = 8,total = size*size;
                        for(var i = 0 ; i < canvasH ; i += size){
                            for( var j = 0 ; j < canvasW ; j += size){
                                var totalR,totalG,totalB;
                                totalR = totalG = totalB = 0;
                                for(var y = 0 ; y < size ; y++){
                                    for(var x = 0 ; x < size ; x++){
                                        var py = i + y,
                                            px = j + x,
                                            pixe = px + py*canvasW;
                                        totalR += pixelTmpData[4*pixe + 0];
                                        totalG += pixelTmpData[4*pixe + 1];
                                        totalB += pixelTmpData[4*pixe + 2];
                                    }
                                }
                                var newR = totalR/total,
                                    newG = totalG/total,
                                    newB = totalB/total;
                                for(var dy = 0 ; dy < size ; dy++){
                                    for(var dx = 0 ; dx < size ; dx++ ){
                                        var py = i + dy,
                                            px = j + dx,
                                            pixe = px + py*canvasW;
                                        pixelData[4*pixe + 0] = newR;
                                        pixelData[4*pixe + 1] = newG;
                                        pixelData[4*pixe + 2] = newB;
                                    }
                                }
                            }
                        }
                        copyCtx.putImageData(imageData,0,0,0,0,canvasW,canvasH);
                    }

                },
                handleCanvasMove:function(){        //处理canvans移动
                    var isCanvasMove = false,
                        lastX,lastY;
                    canvas.onmousedown = function(e){
                        e.preventDefault();
                        isCanvasMove = true;
                        lastX = e.clientX - canvas.getBoundingClientRect().left;
                        lastY = e.clientY - canvas.getBoundingClientRect().top;
                    }
                    canvas.onmousemove = function(e){
                        e.preventDefault();
                        if(!isCanvasMove || scaleChange.value <= 1) return;
                        var x = e.clientX - canvas.getBoundingClientRect().left,
                            y = e.clientY - canvas.getBoundingClientRect().top;
                        var moveX = (x - lastX),
                            moveY = (y - lastY);
                        toolFunc.drawImg(moveX,moveY);
                        lastX = x;
                        lastY = y;
                    }
                    canvas.onmouseup = function(e){
                        e.preventDefault();
                        isCanvasMove = false;
                    }
                    canvas.onmouseout = function(e){
                        e.preventDefault();
                        isCanvasMove = false;
                    }
                }
            };
        }
    </script>
</html>

功效图为澳门金莎娱乐网站 2

用的图纸是

澳门金莎娱乐网站 3

 

2、图片放大镜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas放大镜</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="main" width="800" height="600" 
            style="display: block;margin: 0 auto;border: 1px solid #AAA;">
            亲,您的浏览器不支持canvas
        </canvas>
        <canvas id="magnify" width="200" height="200" style="display: none;"></canvas>
        <script>
            var canvas = document.getElementById("main"),
                ctx = canvas.getContext("2d"),
                canvasW = canvas.width,
                canvasH = canvas.height,
                magnifyCanvas = document.getElementById("magnify"),
                mCtx = magnifyCanvas.getContext("2d"),
                magnifyR = 100;
            var img = new Image();
            img.src = "magnify.jpg";
            img.onload = function(){
                ctx.drawImage(this , 0 , 0 , canvasW , canvasH);
                handleEvent();
            }
            function handleEvent(){
                var isShow = false;
                canvas.onmousedown = function(e){
                    e.preventDefault();
                    draw(e);
                }
                canvas.onmouseup = function(e){
                    e.preventDefault();
                    draw(e);
                }
                canvas.onmousemove = function(e){
                    e.preventDefault();
                    if(!isShow) return;
                    draw(e);
                }
                canvas.onmouseout = function(e){
                    e.preventDefault();
                    draw(e);
                }

                function draw(event){
                    isShow = (event.type == "mousedown" || event.type == "mousemove");
                    ctx.clearRect(0 , 0 , canvas.width , canvas.height);
                    ctx.drawImage(img , 0 , 0 , canvasW , canvasH);
                    if(!isShow) return;
                    var x = event.clientX - canvas.getBoundingClientRect().left,
                        y = event.clientY - canvas.getBoundingClientRect().top;
                    mCtx.save();
                    mCtx.lineWidth = 3;
                    mCtx.strokeStyle = "skyblue";
                    mCtx.beginPath();
                    mCtx.arc(100,100,90,0,Math.PI*2);
                    mCtx.stroke();
                    mCtx.clip();
                    mCtx.drawImage(img , 2*x - 90 , 2*y - 90 , 
                            180 , 180,
                            0 , 0 , magnifyCanvas.width, magnifyCanvas.height);
                    mCtx.closePath();
                    mCtx.restore();
                    ctx.drawImage(magnifyCanvas, (x-(magnifyCanvas.width/2)) , (y-(magnifyCanvas.height/2)) ,
                        magnifyCanvas.width , magnifyCanvas.height);
                }
            }


        </script>
    </body>
</html>

用的图片是澳门金莎娱乐网站 4

 

风华正茂、图像绘制 canvas绘制图像的主意是ctx.drawImage(卡塔尔国;该措施有三种接受办法 1、ctx.drawImage(img,x,y卡塔尔(英语:State of Qatar); img是指...

种类须求写完有生龙活虎段时间了,不过依旧想回过来总结一下,一是对项指标回看优化等,二是对坑的地点做个记录,防止事后碰着雷同的题目。

当然是筹算做 Tencent的贝塞尔曲线下拉刷新图。然后和对象打了个QQ电话,稍微注意了瞬间未联网时候的动画。然后就想着完结以下。

需求

canvas的宗旨点通过变化到canvas的大旨后 canvas的 Y轴由上至下 是从;而数学坐标系的Y轴由上至下 是从的。

选用Wechat强盛的社交才能通过小程序到达裂变的指标,拉取新顾客。

首先看一下html代码。就足足轻易的丰富四个canvas,基本没展开任何操作。

供给分析

var paint, r; //设置画笔和半径var width, height; //获得canvas的长度和宽度var count = 0; //设置正铉曲线的便宜量var colors = ["#66ccff", "#ff0000"];/*程序入口*/function main() { var canvas1 = document.getElementById; paint = canvas1.getContext; width = paint.canvas.width; height = paint.canvas.height; r = width / 2; start(); setInterval;}/*开始进行清除和绘制*/function start() { paint.clearRect; drawXY; paint.restore();}/*绘制一个坐标系*/function drawXY; paint.translate; paint.beginPath(); paint.lineWidth = 1; paint.moveTo; paint.lineTo; paint.lineWidth = 1; paint.moveTo; paint.lineTo;}/*正弦曲线可表示为y=Asin+k,定义为函数y=Asin+k在直角坐标系上的图象,*//*绘制sin正弦图像*/function drawSin; count++;//设置每一刻的偏移量 var i, j, rad, y; for  { for (i = -1000; i < 1000; i++) { paint.beginPath(); paint.strokeStyle = colors[j]; rad = i * Math.PI / 180; y = -20 * Math.sin; paint.arc(i, y, 0.3, 0, 2 * Math.PI, false); paint.stroke(); } } paint.restore();}

1、利用小程序官方提供的api能够直接分享转载到Wechat群张开小程序

JS中要求在意的便是。在对图像举行计时改换的时候,应当要的先实行灭绝。之后要对绘制过的图像进行保存和复苏。不然程序会鬼使神差重叠或然不能出示等bug。

2、利用小程序生成海报保存图片到相册分享到对象圈,客户长按识别二维码关怀民众号仍然张开小程序来达到裂变的目标

此地定义的paint变量名是坚决守护安卓绘图的习于旧贯来的。

达成方案

以上便是本文的全体内容,希望对我们的求学抱有利于,也期望我们多多关照脚本之家。

后生可畏、深入分析如何促成

相信大家应该都会有周围的迷惑,正是何许遵照产物设计的那么绘制作而成海报,其实那时自个儿也是不掌握如何动手,认真想了下得通过canvas绘制作而成图片,那样客商保存这些图形到相册,就足以享用到对象圈了。可是要绘制的图样上边不但有文字还应该有数字、图片、二维码等且都以活的,这几个要怎么动态变化呢。认真想了下,供给一点一点的将文字和数字,背景图绘制到画布上去,那样经过api最后合成叁个图纸导出到手提式无线电话机相册中。

二、供给减轻的难题

1、二维码的动态获取和制图(包含如何生成小程序二维码、大伙儿号二维码、张开网页二维码)

2、背景图如何绘制,获取图片音信

3、将绘制完毕的图样保存到本地相册

4、管理客户是或不是吊销授权保存到相册

三、完成步骤

此间笔者切实写下围绕地点所提议的主题素材,描述大约完毕的进度

①首先成立canvas画布,作者把画布定位设成负的,是为着不让它显得在页面上,是因为小编尝试把canvas通过剖断标准动态的来得和隐身,在绘制的时候会并发难点,所以使用了这种办法,这里还或者有应当要安装画布的轻重。

``

②成立好画布之后,先绘制背景图,因为背景图笔者是坐落于地面,所以博得

零器件 canvas-id 属性,通过 createCanvasContext 创设canvas的绘图上下文 CanvasContext 对象。使用 drawImage 绘制图像到画布,第三个参数是图表的地头地址,前边七个参数是图像相对画布左上角地点的x轴和y轴,最后七个参数是设置图像的宽高。

const ctx = wx.createCanvasContext

ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085)

③成立好背景图后,在背景图上制图头像,文字和数字。通过 getImageInfo 获取头像的音讯,这里供给介怀下在收获的互联网图片要先配备download域名技艺奏效,具体在小程序后台装置里布置。

赢得头像地址,首先量取头像在画布中的大小,和x轴Y轴的坐标,这里的result[0]是本人用promise封装重回的八个图纸地址

let headImg = new Promise { wx.getImageInfo({ src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) })let avatarurl_width = 60, //绘制的头像宽度 avatarurl_heigth = 60, //绘制的头像高度 avatarurl_x = 28, //绘制的头像在画布上的位置 avatarurl_y = 36; //绘制的头像在画布上的位置 ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 前两个参数确定了圆心  坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

那边举个例证说下什么样绘制文字,举例作者要绘制如下这么些“字”,要求动态获取前边字数的总宽度,这样技能设置“字”的x轴坐标,这里本身当然是想经过 measureText 来度量字体的宽度,不过在iOS端第一遍获得的幅度值不对,关于这么些难点,小编还在Wechat开垦者社区提了 bug ,所以小编想用另一个主意来兑现,就是先拿走不奇怪意况下二个字的小幅值,然后乘以总字数就赢得了总增进率,亲试是足以的。

let allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length + 325;ctx.font = 'normal normal 30px sans-serif';ctx.setFillStylectx.fillText;

④绘制群众号二维码,和得到头疑似生龙活虎致的,也是先通过接口重返图片网络地址,然后再通过 getImageInfo 获取大伙儿号二维码图片新闻

⑤怎么绘制小程序码,具体官方网站文书档案也给出生成Infiniti 小程序码接口 ,通过转移的小程序能够展开大肆多个小程序页面,并且二维码永世有效,具体调用哪个小程序二维码接口有两样的施用途景,具体能够看下官方文档怎么说的,也正是说前端通过传递参数调取后端接口重回的小程序码,然后绘制在画布上 ctx.drawImage('小程序码的地头地址', x轴, Y轴, 宽, 高卡塔尔(英语:State of Qatar)

⑥最后绘制完把canvas画布转成图片并重临图片地址

wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function  { canvasToTempFilePath = res.tempFilePath // 返回的图片地址保存到一个全局变量里 that.setData({ showShareImg: true }) wx.showToast }, fail: function () { wx.showToast }, complete: function  wx.hideToast

⑦保留到系统相册;先决断客商是不是张开客户授权相册,处理分化景况下的结果。举例客商大器晚成旦依照常规逻辑授权是没难点的,可是一些客商风流浪漫旦点击了撤回授权该如哪管理,要是不管理会晤世一定的标题。所以当顾客点击打消授权之后,来个弹框提醒,当它再也点击的时候,主动跳到安装教导客户去开启授权,进而达到保存到相册分享生活圈的目标。

// 获取用户是否开启用户授权相册 if  { wx.openSetting => { if  { if (result.authSetting["scope.writePhotosAlbum"] === true) { openStatus = true; wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } } }, fail: () => { }, complete: ; } else { wx.getSetting { // 如果没有则获取授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) }, fail() { // 如果用户拒绝过或没有授权,则再次打开授权窗口 openStatus = false console.log wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) } else { // 有则直接保存 openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } }, fail { console.log }

总结

到现在结束全体的步骤都已经兑现,在绘制的时候会遇到有些异步需要后台再次来到的数码,所以本身用promise和async和await举办了打包,确认保证导出的图片音讯是欧洲经济共同体的。在绘制的进度着实蒙受有个别坑的地点。举个例子初开端导出的图片比例大小不对,还会有用measureText度量文字宽度不对,多次制图不经常导出的图样上的文字颜色会有相对误差等。借使您也超过有的相比坑之处可以黄金时代并钻探下做个记录,下边附下完整的代码

import regeneratorRuntime from '../../utils/runtime.js' // 引入模块const app = getApp(), api = require('../../service/http.js');var ctx = null, // 创建canvas对象 canvasToTempFilePath = null, // 保存最终生成的导出的图片地址 openStatus = true; // 声明一个全局变量判断是否授权保存到相册// 获取微信公众号二维码 getCode: function () { return new Promise(function  { api.fetch('/wechat/open/getQRCodeNormal', 'GET').then(res => { console.log if  { console.log(res.content, 'codeUrl') resolve.catch(err => { console.log }, // 生成海报 async createCanvasImage() { let that = this; // 点击生成海报数据埋点 that.setData({ generateId: '点击生成海报' }) if  { let codeUrl = await that.getCode() wx.showLoading let code = new Promise { wx.getImageInfo({ src: codeUrl, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) }) let headImg = new Promise { wx.getImageInfo({ src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) }) Promise.all.then { const ctx = wx.createCanvasContext console.log(ctx, app.globalData.ratio, 'ctx') let canvasWidthPx = 690 * app.globalData.ratio, canvasHeightPx = 1085 * app.globalData.ratio, avatarurl_width = 60, //绘制的头像宽度 avatarurl_heigth = 60, //绘制的头像高度 avatarurl_x = 28, //绘制的头像在画布上的位置 avatarurl_y = 36, //绘制的头像在画布上的位置 codeurl_width = 80, //绘制的二维码宽度 codeurl_heigth = 80, //绘制的二维码高度 codeurl_x = 588, //绘制的二维码在画布上的位置 codeurl_y = 984, //绘制的二维码在画布上的位置 wordNumber = that.data.wordNumber, // 获取总阅读字数 // nameWidth = ctx.measureText.width, // 获取总阅读字数的宽度 // allReading =  - 325) * 2 + 380; // allReading = nameWidth / app.globalData.ratio + 325; allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length + 325; console.log(wordNumber, wordNumber.toString().length, allReading, '获取总阅读字数的宽度') ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085) ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 前两个参数确定了圆心  坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片 ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制 ctx.setFillStyle; // 文字颜色 ctx.setFontSize; // 文字字号 ctx.fillText(that.data.currentChildren.name, 103, 78); // 绘制文字 ctx.font = 'normal bold 44px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制文字 ctx.font = 'normal normal 30px sans-serif'; ctx.setFillStyle ctx.fillText; ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制文字 ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.percent, 154, 190); // 绘制孩子百分比 ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制孩子百分比 ctx.font = 'normal bold 32px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.singIn, 50, 290); // 签到天数 ctx.fillText(that.data.reading, 280, 290); // 阅读时长 ctx.fillText(that.data.reading, 508, 290); // 听书时长 // 书籍阅读结构 ctx.font = 'normal normal 28px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.bookInfo[0].count, 260, 510); ctx.fillText(that.data.bookInfo[1].count, 420, 532); ctx.fillText(that.data.bookInfo[2].count, 520, 594); ctx.fillText(that.data.bookInfo[3].count, 515, 710); ctx.fillText(that.data.bookInfo[4].count, 492, 828); ctx.fillText(that.data.bookInfo[5].count, 348, 858); ctx.fillText(that.data.bookInfo[6].count, 212, 828); ctx.fillText(that.data.bookInfo[7].count, 148, 726); ctx.fillText(that.data.bookInfo[8].count, 158, 600); ctx.font = 'normal normal 18px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.bookInfo[0].name, 232, 530); ctx.fillText(that.data.bookInfo[1].name, 394, 552); ctx.fillText(that.data.bookInfo[2].name, 496, 614); ctx.fillText(that.data.bookInfo[3].name, 490, 730); ctx.fillText(that.data.bookInfo[4].name, 466, 850); ctx.fillText(that.data.bookInfo[5].name, 323, 878); ctx.fillText(that.data.bookInfo[6].name, 184, 850); ctx.fillText(that.data.bookInfo[7].name, 117, 746); ctx.fillText(that.data.bookInfo[8].name, 130, 621); ctx.drawImage(result[1], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth); // 绘制头像 ctx.draw { // canvas画布转成图片并返回图片地址 wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function  { canvasToTempFilePath = res.tempFilePath that.setData({ showShareImg: true }) console.log(res.tempFilePath, 'canvasToTempFilePath') wx.showToast }, fail: function () { wx.showToast }, complete: function  wx.hideToast } }, // 保存到系统相册 saveShareImg: function () { let that = this; // 数据埋点点击保存学情海报 that.setData // 获取用户是否开启用户授权相册 if  { wx.openSetting => { if  { if (result.authSetting["scope.writePhotosAlbum"] === true) { openStatus = true; wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } } }, fail: () => { }, complete: ; } else { wx.getSetting { // 如果没有则获取授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) }, fail() { // 如果用户拒绝过或没有授权,则再次打开授权窗口 openStatus = false console.log wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) } else { // 有则直接保存 openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } }, fail { console.log } },

总结

以上所述是小编给大家介绍的Wechat小程序生成海报分享朋友圈的实现格局,希望对大家具备助于,要是大家有任何疑问招待给自个儿留言,小编会及时苏醒我们的!

本文由澳门金莎娱乐网站发布于服务器,转载请注明出处:canvas基础学习【澳门金莎娱乐网站】

关键词:

bootstrap手风琴制作方法详解

bootstrap弹出层有多种触发方式,以下是我用到的几种方式: bootstrap手风琴制作方法详解,bootstrap手风琴 手风琴(Co...

详细>>

js_脚本之家,cli搭建项目

对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个`` vue-cli 是一个官方发布 vue.js 项目脚手架,使...

详细>>

js的IIS扩展iisnode安装配置笔记_node,js的IIS扩展

然后把程序入口改为launch.js: 相关文章 相关搜索: 今天看啥 搜索技术库 返回首页 iOS9隐藏技能:第三方应用消息快...

详细>>

魔兽世界样式的tooltip,Handlebars的简单使用

{{title}} {{body}} 示例很简单,具体详情可参考ThinkVitamin的文章 Getting Started withHandlebars.js,希望大家能够喜欢。 *******...

详细>>