从0开始的canvas学习(二)

最新推荐文章于 2024-03-31 23:21:28 发布
最新推荐文章于 2024-03-31 23:21:28 发布
阅读量432 收藏
点赞数
分类专栏： js html 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoulib__/article/details/119023944
版权
js 同时被 2 个专栏收录
45 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏

本文将讲到微信小程序画布和html设置向画布中导入图片和获取视频某帧以及导出图片

向画布上面加载图片drawImage会用到这个api

首先先看看官方怎么说

image.png

image.png

一、html

首先要等把图片加载完成后再调用这个api总体还是蛮简单的

<canvas id="myCanvas"></canvas>
<script>
    var ctx = myCanvas.getContext('2d')
    var myImage = new Image()
    myImage.src = 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image'
    myImage.onload = function () {
        myCanvas.width = myImage.width
        myCanvas.height = myImage.height
        ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
    }
</script>

效果

image.png

导出图片
var ctx = myCanvas.getContext('2d')
var myImage = new Image()
myImage.src = 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image'
myImage.onload = function () {
    myCanvas.width = myImage.width
    myCanvas.height = myImage.height
    ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
    myCanvas.toDataURL("image/png")
}

image.png

在执行时报错告诉你画布被污染了 这个是图片跨域导致 如果来自于同一个服务的话就不会有这个问题了
如果不在同一服务器上时解决办法myImage.crossOrigin = 'Anonymous'


<canvas id="myCanvas"></canvas>
<img id="showImage" />
<script>
    var ctx = myCanvas.getContext('2d')
    var myImage = new Image()
    myImage.src = 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image'
    myImage.crossOrigin = 'Anonymous' // 新增了这一行
    myImage.onload = function () {
        myCanvas.width = myImage.width
        myCanvas.height = myImage.height
        ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
        showImage.src = myCanvas.toDataURL("image/png")
    }
</script>

可以生成png格式的base64文件

然后通过后台上传就行

image.png

视频导canvas然后导图片
<canvas id="myCanvas"></canvas>
<video crossOrigin="anonymous" preload="auto" style="width: 300px;" autoplay muted id="myVideo"
    src="https://vd2.bdstatic.com/mda-jefnpkr5bx02gkdg/sc/mda-jefnpkr5bx02gkdg.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1626865447-0-0-c71b87d3471f605f90848dd439326fc2&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest="
    controls="controls">
</video>
<img id="showImage" />
<script>
    var ctx = myCanvas.getContext("2d")
    function setCanvas() {
        ctx.drawImage(myVideo, 0, 0, myCanvas.width, myCanvas.height)
        showImage.src = myCanvas.toDataURL("image/png")
    }
    let timer = null
    myVideo.addEventListener('play', function (e) {
        var pix = 300 / e.target.videoWidth
        myCanvas.width = e.target.videoWidth * pix
        myCanvas.height = e.target.videoHeight * pix
        timer = setInterval(setCanvas, 20)
    })
    myVideo.addEventListener('pause', function (e) {
        clearInterval(timer)
    })
    myVideo.addEventListener('ended', function (e) {
        clearInterval(timer)
    })
</script>

SDGIF_Rusult_1.gif

二、微信小程序

二、图片

HTML中对跨域资源会导致画布污染需要使用这个crossOrigin="anonymous"属性

小程序中会对没有合法配置的https资源进行限制 开发时勾选不校验https就可以了正式的时候要去小程序后台添加合法域名

image.png

微信小程序 无法操作dom元素 但是官方可以通过createSelectorQuery.select()API去选中部分页面元素当作实列,目前支持VideoContext、CanvasContext、LivePlayerContext、EditorContext和 MapContext

1、获取画布实列
 wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({
        node: true,
        size: true,
      })
      .exec((e) => {
          // 获取的node节点
      })
2、获取画布实列
 wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({
        node: true,
        size: true,
      })
      .exec((e) => {
          // 获取的node节点
              var canvas = res[0].node;
          // 获取画布对象
              var ctx = canvas.getContext("2d")
      })
3、创建图片并且获取图片信息
getImage(src) { return new Promise((r, j) => { wx.getImageInfo({ src: src, success: r, fail: j }) }) },
var newImage = canvas.createImage()
newImage.src = "https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image"
newImage.onload = async (e) => {
    var imageObject = await this.getImage(newImage.src)
}
注意获取完图片的属性之后要直接设置canvas的宽高不然图像会扭曲
this.dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = imageObject.width * this.dpr
canvas.height = imageObject.height * this.dpr

如果在使用toDataURL报错了可以看看自己的

image.png

image.png

有两种图片导出的方式一种是base64直接通过后台处理

一种是向后台上传

一种临时文件canvasToTempFilePath使用这个API

全代码

index.wxml
<canvas
  type="2d"
  id="myCanvas"
  style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;"
></canvas>
<image mode="widthFix" src="{{imageSrc}}"></image>
index.js
Page({
  data: {
    canvasHeight: 200,
    canvasWidth: 200,
    imageSrc:""
  },

  onLoad: function () {
    // 通过 SelectorQuery 获取 Canvas 节点
    this.dpr = wx.getSystemInfoSync().pixelRatio
    this.windowWidth = wx.getSystemInfoSync().windowWidth
    wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.getCanvas.bind(this))
  },
  getImage(src) {
    return new Promise((r, j) => {
      wx.getImageInfo({
        src: src,
        success: r,
        fail: j
      })
    })
  },
  getCanvas(res) {
    var canvas = res[0].node;
    console.log(canvas)
    // 获取画布对象
    var ctx = canvas.getContext("2d")
    var newImage = canvas.createImage()
    newImage.src = "https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image"
    newImage.onload = async (e) => {
      var imageObject = await this.getImage(newImage.src)
      // 防止画面扭曲
      canvas.width = imageObject.width * this.dpr
      canvas.height = imageObject.height * this.dpr
      this.setData({
        canvasHeight: imageObject.height,
        canvasWidth: imageObject.width
      })
      // 或多或少可以让画面更清晰一些
      ctx.scale(0.1, 0.1)
      ctx.drawImage(newImage, 0, 0, imageObject.width * this.dpr * 10, imageObject.height * this.dpr * 10)
      this.setData({
        imageSrc:canvas.toDataURL('image/png')
      })
       wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: imageObject.width,
        height: imageObject.height,
        destWidth: imageObject.width * this.dpr,
        destHeight: imageObject.height * this.dpr,
        canvas:canvas,
        success:(res) => {
          console.log(res)
          this.setData({
            imageSrc1:res.tempFilePath
          })
          // wx.uploadFile() 进行上传
        }
      })
    }
  }

})
二、视频

SDGIF_Rusult_1.gif
只能将临时链接或者文件本地地址放入画布
这是下面使用getVideoInfoAPI可能用到的插件
链接：https://pan.baidu.com/s/1xYr1cQA0C8ggPgpGioLN-g
提取码：tbyb
首先封装一个下载视频和获取视频信息的方法

 downloadFileVideo(url) {
    return new Promise((r, j) => {
      wx.downloadFile({
        url: url, 
        success: r,
        fail: j
      })
    })
  },
  myGetVideoInfo(url) {
    return new Promise((r, j) => {
      wx.getVideoInfo({
        src: url,
        success: r,
        fail: j
      })
    })
  },

页面结构

<canvas
  type="2d"
  id="myCanvas"
  style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;"
></canvas>
<video id="myVideo" style="width:{{videoWidth}}px" bindplay="videoPlay"  bindpause="videoPause" src="{{videoSrc}}"  binderror="videoErrorCallback" ></video>
<image mode="widthFix" src="{{imageSrc}}"></image>

上面对应的参数
  data: {
    canvasHeight: 200,
    canvasWidth: 200,
    imageSrc: "",
    videoSrc: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
    videoWidth: 300,
    videoHeight: 225
  },

大致逻辑和之前绘制图片一样
这里直接把代码放到这里

 data: {
    canvasHeight: 200,
    canvasWidth: 200,
    imageSrc: "",
    videoSrc: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
    videoWidth: 300,
    videoHeight: 225
  },
  videoErrorCallback: function (e) {
    console.log(e)
  },
  videoPlay: function (e) {
    this.timer = setInterval(() => {
      this.ctx.drawImage(this.video, 0, 0, this.data.videoWidth * this.dpr, this.data.videoHeight * this.dpr)
      this.setData({
        imageSrc:this.canvas.toDataURL('image/png')
      })
    }, 20);
  },
  videoPause: function (e) {
    clearInterval(this.timer)
  },
  downloadFileVideo(url) {
    return new Promise((r, j) => {
      wx.downloadFile({
        url: url, 
        success: r,
        fail: j
      })
    })
  },
  myGetVideoInfo(url) {
    return new Promise((r, j) => {
      wx.getVideoInfo({
        src: url, 
        success: r,
        fail: j
      })
    })
  },
  onLoad: async function () {
    // 通过 SelectorQuery 获取 Video 节点
    wx.createSelectorQuery().select('#myVideo').context(async res => {
      this.video = res.context
      var videoObj = await this.downloadFileVideo(this.data.videoSrc)
      var videoInfo = await this.myGetVideoInfo(videoObj.tempFilePath)
      this.setData({
        videoHeight: videoInfo.height * (this.data.videoWidth / videoInfo.width)
      })
      this.dpr = wx.getSystemInfoSync().pixelRatio
      wx.createSelectorQuery()
        .select('#myCanvas')
        .fields({
          node: true,
          size: true,
        })
        .exec(this.getVideoCanvas.bind(this))
    }).exec()
  },
  getVideoCanvas(res) {
    var canvas = res[0].node;
    this.canvas = canvas
    canvas.width = this.data.videoWidth * this.dpr
    canvas.height = this.data.videoHeight * this.dpr
    this.setData({
      canvasHeight: this.data.videoHeight,
      canvasWidth: this.data.videoWidth
    })
    this.ctx = canvas.getContext("2d")
    this.video.play()
  },
奥吼吼~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas学习（十四）：canvas交互之isPositonInPath
总有一天，你的日积月累，会成为别人的望尘莫及
08-04 750
先说说用到的两个方法： 1、isPositonInPath(x,y):判断(x,y)是否在canvas绘制的图形所在路径中。不太理解的可以参考W3School中的“HTML5 canvas isPointInPath() 方法” 2、getBoundingClientRect()：这个方法用来用来获取元素位置，即获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundin...
JavaScript 学习笔记【canvas】
湖边的小屋圣迹
08-18 592
下载图片 var canvas = document.querySelector('#app canvas'); var strDataURI = canvas.toDataURL("image/png"); var image=strDataURI.replace("image/png", "image/octet-stream"); window.location.href=image; Component series.map not exists
微信小程序3.3.5 获取摄像头实时帧并存储到临时文件目录，查看临时文件目录图片
最新发布
supermodule的博客
03-31 183
【代码】微信小程序3.3.5 获取摄像头实时帧并存储到临时文件目录，查看临时文件目录图片。
html页面截图 html2canvas学习
宋大王的博客
04-26 317
html页面截图 html2canvas学习html2canvas介绍demo遇到的问题 html2canvas介绍 html2canvas是一个js插件，可以非常简单的帮我实现html截图 官网 安装 npm install html2canvas 官方给的简单的例子 这个例子适应的html2canvas ^1 的版本 html2canvas(document.body).then(fun...
小程序使用canvas标签生成海报并保存图片
aaa123aaasqw的博客
03-17 1935
第三步是拿到canvas对象实例返回用于在画布上的环境，这里拿canvas节点实例用到wx.createSelectorQuery()这个api，拿到画布后就可以开始插入图片，绘制矩形等操作，这里要注意小程序要先缩放画布，如果不缩放，会导致画布过大不适应手机屏幕，canvas的像素单位是px，所以不能自适应屏幕，需要做换算，我换算的原理是设计稿的宽度是750，所以我按照设计稿的宽度进行换算，后来听我师傅说用rem也可以，但是懒得换了，就没换了哈哈哈。//这个方法是将一个字符串分割成字符串数组。
微信小程序新版canvas绘制图片方法
huai42717的博客
01-10 4297
canvas绘制二维码
小程序canvas绘制K线，从0开始的日记（ 二）
03-29
我们发现，在canvas API中，能够画出曲线的有2个 beZierCurveTo(num1, num2, num3, num4, x, y) quadraticCurveTo(num1, num2, x, y) 这两个api都是通过贝塞尔曲线来绘制路径。好在学习PS的时候，对贝塞尔曲线的具体...
canvas实现十二星座星空图
08-31
在本文中，我们将探讨如何使用HTML5的Canvas API来创建一个十二星座的星空图。Canvas是HTML5的一个重要特性，它允许开发者通过JavaScript在网页上...通过这个示例，开发者可以学习到Canvas在Web图形设计中的强大功能。
HTML5 canvas基本绘图之绘制曲线
09-27
总之，HTML5 canvas的`<canvas>`元素和CanvasRenderingContext2D提供了强大的图形绘制能力，通过学习和熟练掌握这些API，开发者可以创建出丰富的交互式网页内容，为用户提供更加生动和个性化的体验。
从0到1学习JavaScript编写贪吃蛇游戏
10-15
1. **HTML5 Canvas**: 贪吃蛇游戏的界面是通过`<canvas>`元素创建的，它是一个用于在网页上绘制图形的二维画布。`getElementById`函数用于获取这个canvas元素，`getContext("2d")`则获取到2D渲染上下文，用以进行...
HTML5 canvas基本绘图之绘制五角星
09-27
总的来说，HTML5 `<canvas>`标签结合CanvasRenderingContext2D对象提供了强大的图形绘制能力，通过学习和掌握这些API，开发者可以创建出各种复杂的图形和动画效果，为网页增加更多的交互性和视觉吸引力。
微信小程序裁剪视频部分内容导出
zhoulib__的博客
07-14 3071
如果是单纯的想裁剪视频的话，微信小程序提供了一个非常便捷的API openVideoEditor 如果要更换音频轨道，或者在为视频增加什么样式，就会分别获取到视频的视频轨道和音频轨道和视频的每一帧 首先是获取视频的每一帧微信小程序提供了 createVideoDecoder API用来解析视频的帧数，虽然我用的时候总是感觉丢帧，但目前也没找到别的办法下面我们来获取视频的帧，并生成每一帧的图片，会用到 createOffscreenCanvas这个API用来创建一个离屏画布首先如果是选择视频的话可以直接获取到
canvas图像像素处理- 马赛克/滤镜(一)
汉堡请不要欺负面条
03-02 5201
getImageData() 从Canvas画板上取得所选区域的像素数据. putImageData() 方法函数则表示将所得到的像素数据描画到Canvas画板上形成图形。 如何在图像中参考一个像素周围的其他像素，进而实现一个图像处理.
小程序canvas绘制自适应海报并生成图片
qq_42129925的博客
06-27 4210
效果图 橘子可以放上小程序码或者其他什么码 代码: wxml <!--画布--> <canvas style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;" canvas-id="firstCanvas"></canvas> <view class='main'> <...
canvas.width和canvas.style.width区别以及应用
weixin_33901926的博客
10-26 2093
今天讲的内容是canvas.width和canvas.style.width的区别，在没有做canvas项目之前，其实我是并没有深入了解过这两个属性的，最近在研究canvas项目的自适应问题，尤其是在canvas中置入图片，碰到了图片模糊的问题，这些“杂症”都是和文章要讲的canvas.width/canvas.style.width有关...
小程序图片 mode 设置为 widthFix 图片显示瞬间竖向拉伸变形闪烁
漫天随飞雪的博客
10-26 9160
官方文档中 mode="widthFix" 宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。 但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高，也许是高度没设置的原因。 所以把图片设置 height: auto 即可解决问题 ...
微信小程序开发之——时钟-Canvas介绍(1)
我的博客
09-30 1161
一 概述 Canvas画布属性介绍 Canvas用法示例(新/旧) 二 Canvas画布属性介绍 属性 类型 说明 type string 指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0) canvas-id string canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 disable-scroll boolean 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 bindtouchstar
小程序 canvas2d 趟坑记录
小小小卒
05-10 5486
一、关于canvas绘图，小程序官方文档目前有新旧两种接口，分别如下： 1、Canvas 2D 示例代码 <!-- canvas.wxml --> <canvas type="2d" id="myCanvas"></canvas> onReady() { const query = wx.createSelectorQuery() query.select('#myCanvas') .fields({ node: true, siz
nodejs 从零开始安装canvas库
09-18
请按照以下方法从零开始安装canvas库： 1. 首先，确保您的系统上已安装以下软件包： - Cairo图形库：可以使用以下命令在CentOS上安装Cairo： ``` yum install cairo-devel ``` - Pango图形库：可以使用以下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值