精华内容
下载资源
问答
  • canvas绘制多张网络图片

    千次阅读 2018-08-31 11:48:32
    1、最近在做小程序的分享图的时候,后台返回...3、先绘制多张网络的图片,有可能会出现小图先加载大图后加载。导致出现的图片没有完全绘制出来。 4、说了这么多,直接上代码。 downfile(url){//下载网络图片的prom...

    1、最近在做小程序的分享图的时候,后台返回的背景图和小程序码网络图片。canvas不能绘制网络的图片和base64形式的图片。
    2、现在的做法是先把图片下载到本地。就是 wx.downloadFile( )。
    3、先绘制多张网络的图片,有可能会出现小图先加载大图后加载。导致出现的图片没有完全绘制出来。
    4、说了这么多,直接上代码。
    5、网络图片的地址一定要在小程序后台——开发设置downloadfile域名。如果不配置域名,会出现开发工具是可以。在真机中打开调试工具也是可以生成分享图的,但是在真机上关闭调试工具就会报错。

      downfile(url){//下载网络图片的promise对象
        return new Promise(function (resolve, reject) {
          wx.downloadFile({
            url:url ,
            success: function (res) {
              resolve(res.tempFilePath)
            }
          })
        })
      },
     onLoad: function (options) {
        wx.showLoading({
          title: '努力生成中...'
        })
        var  that=this;
        //网络图片一定要在后台小程序那设置服务器的域名  downloadFile合法域名
        var avatar = "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIC6rA7qoOZicxAj9cPLBfx7ykSjxgW1RYYhdic1c522ic1uYlQ5xOTZq0Oia3GFIRve3T00b7QjAlLPA/132"
        var  photo=
          "https://t1.huanqiu.cn/992df16f9c31415271942b41c6f9c44a.jpg";
    
        var promise1 = that.downfile(photo);
        var promise2 = that.downfile(avatar)
        Promise.all([
        promise1, promise2
      ]).then(res => {
       // console.log(res)   就是所有的网络图片都下载到本地后在绘制图像。
        const ctx = wx.createCanvasContext('shareImg')
        ctx.drawImage(res[0], 0, 0, 545, 771)
        ctx.drawImage( res[1], 158, 190, 210, 210)
          ctx.draw(true)
    
        return res;
      }).then(res => {
        console.log(res);
        if (res.length == 2) {
          setTimeout(function () {
            that.share();//这个是把canvas绘制图片的函数
          }, 1000);/如果不设置时间定时器图片会出不来。
    
        }
    
      })
    
    
      },
    
    share: function () {
        var that = this
        that.savaImageToPhoto();
        wx.getSetting({
          success(res) {
            console.log(res);
            if (!res.authSetting['scope.writePhotosAlbum']) {
              //没有获取授权
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success(res) {  //这里是用户同意授权后的回调
                  that.setData({
                    saveImgBtnHidden: true,
                    openSettingBtnHidden: false,
                  })
                },
                fail(res) {这里是用户拒绝授权后的回调
                  that.setData({
                    saveImgBtnHidden: false,
                    openSettingBtnHidden: true,
                  })
    
                }
              })
            }else{//有授权的功能
            //获取授权后的
              that.setData({
                saveImgBtnHidden: true,
                openSettingBtnHidden: false,
              })
            }
          }
        })
    
    
      },
    
      /**
       * 保存到相册
      */
      save: function () {
        var that = this
        //生产环境时 记得这里要加入获取相册授权的代码
        wx.saveImageToPhotosAlbum({
          filePath: that.data.prurl,
          success(res) {
            console.log(res)
            wx.showToast({
              title:'图片保存到相册',
              mask: false,
              icon:'success',
              success:function(){
    
              }
            })
    
          },
          fail(err){
            console.log(err)
          }
        })
    
      },

    5.后续会继续更新小程序的问题。

    展开全文
  • 主要介绍了html5使用canvas绘制一张图片,需要的朋友可以参考下
  • canvas 主要涉及几个部分, 背景图(包括二维码啊之类的)、用户头像(接口自己抓取的)、用户名称、来到蜗牛英语的天数、写了多少篇手记、写了大概多少字。 步骤: 1. 在 template 写入canvas 标签 &...

    公司小程序 推广图大概是这样的

    在这里插入图片描述

    整张 canvas 主要涉及几个部分, 背景图(包括二维码啊之类的)、用户头像(接口自己抓取的)、用户名称、来到蜗牛英语的天数、写了多少篇手记、写了大概多少字。
    步骤:

    1. 在 template 写入canvas 标签

    <canvas  class="ShareImg" style="width: 270px; height: 450px;" canvas-id="shareCanvas" wx:if="{{canvasHide}}"></canvas>
    

    2. 使用 wx.downloadFile() 将网络图片转换成本地图片

    因为 ctx.drawImage(url, X, Y, width, height) 中的 url 只接受本地图片的链接,所以需要通过 wx.downloadFile() 将网络图片转换成本地图片 (这里一定要在微信管理后台进行域名配置, 后台里面有一个 downloadUrl ,例如你用的图片的域名是 https://image.sngin.com.cn 那么 你后台就要配置这个,要不然你画不上去)

    wx.downloadFile({
      url: this.profileAvatar,
      success: (res) => {
        if (res.statusCode === 200) {
          this.AvatarPath = res.tempFilePath
          this.$apply()
        }
      }
    })
    

    解释一下: this.profileAvatar 是我在个人中心获取完用户信息 保存在这个字段里面的。 this.$apply() 是在使用 wepy 框架中独有的方法,主要是处理一些 异步请求之后 信息赋值给不上的问题。
    这样 我们就拿到了 第一张 由 网络——>本地 之间的转换,并且放到了 this.AvatarPath 这个变量中。下面就开始绘图
    **

    3. 点击 ‘保存本地’ 按钮 触发 一个叫做 ‘storeImgToLocal’ 的方法

    **
    (我这里就当你熟练掌握 wepy了)

    wx.downloadFile({
      url: 'https://image.snaily.com.cn/canvasNew.png',
      success: (res) => {
        if (res.statusCode === 200) {
          const ctx = wx.createCanvasContext('shareCanvas')
          ctx.drawImage(res.tempFilePath, 0, 0, 270, 450)
          ctx.drawImage(this.AvatarPath, 5, 30, 51, 51)
          ctx.stroke()
          ctx.draw()
        }
      }
    })
    

    在这里的 ’ https://image.snaily.com.cn/canvasNew.png ’ 是我们的背景图片, 因为我这个 推荐图 就两张图片 所以我就这么先写了,如果你那里有很多的话,可以将他们放到一个数组中,将 上面第一个代码块 封装成一个函数, 通过循环数组来调函数,可以将他们都转化成 本地图片, 然后在通过 ctx.drawImg(url, X, Y, Width, Height) 来将他们绘到 canvas 上。
    现在两张图片已经绘制到上面了, 接下来就要把文字绘上去。

    wx.downloadFile({
      url: 'https://image.snaily.com.cn/canvasNew.png',
      success: (res) => {
        if (res.statusCode === 200) {
          const ctx = wx.createCanvasContext('shareCanvas')
          ctx.drawImage(res.tempFilePath, 0, 0, 270, 450)
          ctx.drawImage(this.AvatarPath, 5, 30, 51, 51)
          ctx.setFontSize(18)
          ctx.fillText(this.groupName + '的成就墙', 71, 76)
          ctx.setFontSize(10)
          ctx.fillText('来到蜗牛的第' + this.fromDays, 83, 95)
          ctx.setFontSize(10)
          ctx.fillText('共写' + this.writeDiarys + '篇亲子成长手记', 83, 109)
          ctx.setFontSize(10)
          ctx.fillText('累计' + this.words + '字', 83, 124)
          ctx.stroke()
          ctx.draw()
        }
      }
    })
    

    在每一个 ctx.fillText(文字, X, Y) 的前面加一个 ctx.setFontSize(size) 就可以控制他的文字大小了。

    4.将 绘制 好的canvas 转变成图片 并 保存到一个变量中

    wx.downloadFile({
      url: 'https://image.snaily.com.cn/canvasNew.png',
      success: (res) => {
        if (res.statusCode === 200) {
          const ctx = wx.createCanvasContext('shareCanvas')
          ctx.drawImage(res.tempFilePath, 0, 0, 270, 450)
          ctx.drawImage(this.AvatarPath, 5, 30, 51, 51)
          ctx.setFontSize(18)
          ctx.fillText(this.groupName + '的成就墙', 71, 76)
          ctx.setFontSize(10)
          ctx.fillText('来到蜗牛的第' + this.fromDays, 83, 95)
          ctx.setFontSize(10)
          ctx.fillText('共写' + this.writeDiarys + '篇亲子成长手记', 83, 109)
          ctx.setFontSize(10)
          ctx.fillText('累计' + this.words + '字', 83, 124)
          ctx.stroke()
          ctx.draw()
          wx.hideLoading()
          setTimeout(() => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              canvasId: 'shareCanvas',
              success: (res) => {
                console.log('临时路径')
                console.log(res.tempFilePath)
                this.storeImgPath = res.tempFilePath
                this.$apply()
              }
            })
          }, 1200)
        }
      }
    })
    

    解释一下: 后面使用 setTimeout 主要是想起到一个 异步的作用, 因为有的时候他可能没那么及时绘制出来,所以给一个异步确保一下,这里也可以使用 Promise的 .then((res) => {}) 去处理 更方便一些,但是目前我这个也可以运行的。
    现在 我们已经把canvas 转变成 图片 并 将地址保存在 this.storeImgPath 中。 接下来就是 调 保存到本地的API

    wx.getSetting({
       success: (res) => {
         if (!res.authSetting['scope.writePhotosAlbum']) {
           wx.authorize({
             scope: 'scope.writePhotosAlbum',
             success: () => {
               console.log('授权了')
               wx.saveImageToPhotosAlbum({
                 filePath: this.storeImgPath,
                 success: (res) => {
                   console.log(res)
                   console.log('保存成功')
                   wx.showToast({
                     title: '分享图已经保存到您的相册了哦~',
                     icon: 'none'
                   })
                 }
               })
             }
           })
         } else {
           console.log('已经授过权了')
           console.log(this.storeImgPath)
           wx.saveImageToPhotosAlbum({
             filePath: this.storeImgPath,
             success: (res) => {
               console.log(res)
               wx.showToast({
                 title: '分享图已经保存到您的相册了哦~',
                 icon: 'none'
               })
             }
           })
         }
       }
     })
    

    主要思想就是。 先判断用户 对这个 scope.writePhotosAlbum 是否进行过授权, 如果没有授权需要用户先进行授权, 如果已经授权过了 可以直接 调用 ‘wx.saveImageToPhotosAlbum’ 将我们 已经生成图片的地址 给它就 OK 了

    展开全文
  • canvas绘制一张图片

    2019-11-12 10:44:06
    1 <canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas> 1 ...

     

    1 <canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas>

     

     

     1  var canvas=document.getElementById("canvas");
     2     var cxt=canvas.getContext("2d");
     3     var img=new Image();
     4     img.src="cat.jpg";
     5     cxt.drawImage(img,10,10,490,382);
     6 /*
     7 测试发现一个问题  在浏览器第一次执行的时候经常看不到图片,
     8 在刷新一次后才能看到图片,有谁知道这是什么原因的,麻烦大神告诉我一下啊
     9 .呵呵
    10 */

     

    展开全文
  • Canvas是HTML5的画布元素,相当于一个画板,你可以在Canvas绘制任意的东西,今天分享一款利用Canvas绘制的灰太狼图片形象,个人以为,这个灰太狼绘制得十分形象逼真,小伙伴们都要惊呆了。以后我们再来弄一个...
  • 主要介绍了详解canvas绘制多张图的排列顺序问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • canvas 绘制图片

    2019-12-31 18:22:04
    前面我们了解了canvas的一些基本使用方法,在canvas中我们还可以在canvas中直接绘制图片,在canvas绘制图片主要使用到drawImage方法 一:drawImage方法参数有三中情况 1:三个参数 ctx.drawImage(image,dx,dy)...

    前面我们了解了canvas的一些基本使用方法,在canvas中我们还可以在canvas中直接绘制图片,在canvas中绘制图片主要使用到drawImage方法

    一:drawImage方法参数有三中情况

    1:三个参数

    ctx.drawImage(image,dx,dy)

    image:需要绘制的img图片

    dx,dy:绘制的img图片在canvas中的坐标(x,y)

    2:五个参数

    ctx.drawImage(image,dx,dy,dw,dh)

    image:需要绘制的img图片

    dx,dy:绘制的img图片在canvas中的坐标(x,y)

    dw,dh:绘制的img图片在canvas中的大小(w,h)宽高

    3:9个参数(用于切片),通俗的说就是将图片进行特定裁剪然后放到指定的位置

    ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)

    image:需要绘制的img图片

    sx, sy, sw, sh:定义图像源的切片位置和大小

    dx, dy, dw, dh:定义切片的目标显示位置和大小

    二:在canvas中绘制图片分两种情况

    1:有现成的img图片,将img标签中的图片绘制到canvas中

    var canvas = document.getElementById("myCanvas");
    if (!canvas.getContext) {
        return '不支持canvas'
    }
    var ctx=canvas.getContext("2d")
    //创建图片
    var img = document.querySelector("img");
    //绘制图片
    ctx.drawImage(img, 0, 0)

    2:从零开始创建图片

    var canvas = document.getElementById("myCanvas");
    if (!canvas.getContext) {
        return '不支持canvas'
    }
    var ctx=canvas.getContext("2d")
    //创建图片
    var img = new Image();   // 创建一个<img>元素
    img.onload = function(){
        ctx.drawImage(img, 0, 0)//绘制图片
    }
    img.src = 'wj.jpg'; // 设置图片源地址

    三:根据上面drawImage参数的三种情况,我们来分别实现,看看效果

    1:ctx.drawImage(image,dx,dy):将原始图片绘制到canvas中

    var canvas = document.getElementById("myCanvas");
    if (!canvas.getContext) {
        return '不支持canvas'
    }
    var ctx=canvas.getContext("2d")
    //创建图片
    var img = new Image();   // 创建一个<img>元素
    img.onload = function(){
        ctx.drawImage(img, 0, 0)//绘制图片
    }
    img.src = 'wj.jpg'; // 设置图片源地址

     

    image.png

    2:ctx.drawImage(image,dx,dy,dw,dh):给图片设置大小绘制到canvas中

    var canvas = document.getElementById("myCanvas");
    if (!canvas.getContext) {
        return '不支持canvas'
    }
    var ctx=canvas.getContext("2d")
    //创建图片
    var img = new Image();   // 创建一个<img>元素
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 50, 50)//绘制图片
    }
    img.src = 'wj.jpg'; // 设置图片源地址

    image.png

    image.png

    3:ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh):切片,将图片进行特定裁剪然后放到指定的位置

    var canvas = document.getElementById("myCanvas");
    if (!canvas.getContext) {
        return '不支持canvas'
    }
    var ctx=canvas.getContext("2d")
    //创建图片
    var img = new Image();   // 创建一个<img>元素
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 250)
    }
    img.src = 'wj.jpg'; // 设置图片源地址

    image.png

    展开全文
  • canvas绘制图片

    千次阅读 2019-03-22 10:54:03
    canvas绘制图标1. 绘制图片2. 图片切片 1. 绘制图片 ctx.drawImage(img, x, y [, width, height]); 参数说明: 1. img为new Image()或者document.querySelector('img')返回的对象 2. (x, y)为绘制图片的起始坐标...
  • Canvas绘制图片模糊

    2017-07-08 18:05:21
    canvas绘制图片模糊,canvas,html5,javascript
  • canvas绘制图片,图片变模糊 问题: 设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况。 我拿下面一张图片画到canvas上作为例子,看...
  • 通过fabric.js绘制多张图片,同理这一步也可以直接使用canvas绘制多张图片; 通过save()将整个绘制的canvas的内容转成base64数据,然后onload方法后对图片进行剪切操作; 分割的方法主要就是canvas的putImageData ...
  • 主要介绍了HTML5 Canvas绘制文本及图片的基础教程, 通过Canvas我们就可以用JavaScript制作出程序代码可以轻松控制的文本和图片数据,需要的朋友可以参考下
  • JS | canvas 绘制多

    千次阅读 2017-01-12 11:09:39
    “处理图片是我们普通市民的责任,积累跬步是我本身的兴趣,所以加载图片我每次都跑一次,如果遇到多张图片的话我还会多跑几次。” ——题记,改自《破坏之王》 正文 canvas一箩筐问题, 之前一文 JS | ...
  • 主要为大家详细介绍了js HTML5 canvas绘制图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 您可能感兴趣的话题:绘制文字核心提示:如何在HTML5 canvas绘制绘制文字,并且可以设置文字的字体,大小和颜色。我们可以在HTML5 canvas绘制绘制文字,并且可以设置文字的字体,大小和颜色。绘制文字的字体由2D...
  • canvas绘制动态图片

    千次阅读 2018-08-01 15:30:14
    canvas绘制动态图片 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"...
  • canvas绘制图片模糊

    2019-09-04 17:52:43
    (1)canvas绘制的是位图,而我们平常用的jpg,png也是位图。 位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度等信息来存储和显示图像。具象一点讲,可以将位图想象成一个巨大的拼图,这个拼图有...
  • 下面小编就为大家带来一篇【HTML5】Canvas绘制简单图片教程。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
  • H5-canvas合成多张图片成一张图片并下载 H5-canvas合成多张图片成一张图片并下载 原理很简单,就是利用一张图片作为背景画布,把另外的图片绘制在画布上进行合并成一张图片 compositeImg(url) { let canvas = ...
  • 上一篇我们介绍了canvas绘制工作流的大概步骤,接下来会有系列文章细致的介绍怎么用canvas绘制工作流;这篇文章主要介绍用canvas绘制流程节点。 绘制前我们需要先准备一张节点图片,例如:;好了,正题开始: 1.在...
  • canvas 绘制旋转直线

    2018-07-23 14:23:24
    1)canvas 绘制圆环 绘制带有旋转角度的直线 2)详细介绍看注释
  • 小程序:canvas绘制网络图片

    千次阅读 2018-10-20 16:36:36
    小程序不能直接将网络图片绘制到canvas上,需要将... // canvas绘制网络图片需保存至本地 wx.getImageInfo({ src: options.haibaoImg,//服务器返回的图片地址 success: function (res) { //res.path是网络图片的...
  • canvas绘制多张图的排列顺序问题

    千次阅读 2019-01-20 16:16:09
    在开发中,如果遇到需要使用canvas同时绘制多张图片,但因为图片大小的不一样,排在数组前面的图片不一定能先被load然后绘制,就可能会导致画出来的图的排列顺序和预想的不一样(特别是因为跨域加了域名重定向的图片...
  • 一个很大的图片绘制到canvas上面,显示压缩后的大小 // imgSrc - 小程序本地图片路径,网络图片要先下载到本地(wx.getImageInfo或wx....// dx - canvas绘制的x坐标 // dy - canvas绘制的y坐标 // dwidth - 绘制在c

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,372
精华内容 22,548
关键字:

canvas绘制多张图片