使用canvas绘图drawImage遇到的问题

syszj 2016-06-11 09:02:33

image原本的尺寸为200px X 200px，现在想对图片同时进行缩略图(100px X 100px)和剪切的操作，发现drawImage还是使用原图大小进行剪切，请问如何解决这个问题？

ctx.drawImage(img,0,0,100,100,0,0,100,100)

...全文

491 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2016-06-11

打赏
举报

回复

ctx.drawImage(img,0,0,200,200,0,0,100,100) 红色的是剪切操作的参数，绿色的是缩放操作的参数，

syszj 2016-06-11

打赏
举报

回复

多谢KK3K2005

KK3K2005 2016-06-11

打赏
举报

回复

先弄一个canvas做成缩略图然后用这个canvas做成drawimage的 img参数

问题描述问题产生对于微信小程序，canvas处理过程中，dramImage默认图片引用是有残缺的导入初始项目打开链接（原官网例子），浏览器唤醒微信开发这工具，打开连接之前需要下载好微信开发者工具，如已安装则直接唤起，没有则会提示下载目的通过对canvas绘图过程的修改，或者其样式的修改，达到完全显示，并自适应不同机型的目的解决方案准备工作 Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '', // canvas 高度 byclear: 1 /

问题描述问题产生对于微信小程序，canvas处理过程中，dramImage默认图片引用是有残缺的导入初始项目打开链接（原官网例子），浏览器唤醒微信开发这工具，打开连接之前需要下载好微信开发者工具，如已安装则直接唤起，没有则会提示下载目的通过对canvas绘图过程的修改，或者其样式的修改，达到完全显示，并自适应不同机型的目的解决方案准备工作 Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '', // canvas 高度 byclear: 1 // 比例，这里将

本课程详细介绍的OMNeT++的Canvas仿真实例,详解讲解了通过使用Canvas的API进行2D仿真图形的动态绘制以及通过cPolyFigure,cImageFigure,cTextFigure等类的使用来实现仿真的移动效果，通过本课程的学习应用OMNeT++进行...

本文主要介绍了canvas绘图不清晰的解决方案，具有很好的参考价值，下面跟着小编一起来看下吧

先说下canvas绘图的基本方法,如下： const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); const img = new Image(); img.src = "1.jpg"; //当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕 img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50)

39,084

社区成员

5,548

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章