在微信内置浏览器中用canvas的drawImage方法进行两张图片的拼合的相关问题

需求是用户选择相框,再上传一张图片并剪裁,将剪裁的图片和相框拼接,都是在前台实现功能,剪裁图片是使用copperjs实现的,获取到剪裁图片的blob和base64,在获取选中相框的src并转换为bolb和base64,然后新建一个canvas对象 在里面拼合两张图片,这时候会出现以下情况
1.剪裁图片预览是纯黑色的图
2.剪裁图片预览成灰色,且图片内容并排重复,夹杂雪花效果
3.相框预览是白色,
4.相框拼接不到剪裁图片上

            请问前辈有没有什么好的解决方案,会不会是因为drawimage导致微信浏览器崩溃?还是跟安卓机型有关?  这套代码在iphone和pc浏览器中运行都是ok的
0

2个回答

1

其实,canvas就是一个可以自定义的img标签。canvas可以本地save,你把两张图片分别drawImage,然后按需求加上矩形框,拼接图片,最后save成一张完整的图片
就已经满足你的需求了,其实没多难,移动端、PC也可以,不过重点测试安卓,因为有些安卓机会很卡~!祝好运!

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用h5的canvas实现两张图片的合并
思路: 1.首先等待图片加载完成 2.然后使用canvas完成图片的合并 3.显示合成图片 步骤: 1.根据第一个思路,需要image的load和error事件,大致流程: var l_image = new Image(); l_image.src = src; l_image.onload = function () {}; l_image.onerror = function
微信小程序-drawImg绘制多张网路图片
微信小程序自带的分享功能不支持分享到朋友圈,那我们的替代方法就是生成一张带小程序二维码的图片,在做这个时,刚开始写静态用的本地图片最后生成的图片都挺好的,但是后台将图片换成网络地址之后就出现了图片绘制不出来的情况解决办法就是先用wx.getImageInfo({})先获取网络图片信息,在它的成功获取的回调函数里面进行canvas绘制网络图片,一个canvas里面要绘制多张网络图片时,需要在绘制完一...
canvas 多个图片叠加,图片覆盖图片显示到imageview
ImageView imageView=(ImageView)findViewById(R.id.image); // 防止出现Immutable bitmap passed to Canvas constructor错误 Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),
微信小程序之画布drawImage和settimeout生成本地图片
微信小程序开发中会碰到wx.getImageInfo异步加载的问题,图片未加载完成的话会导致ctx.drawImage()画空。发现利用settimeout这个函数全部生成好之后再放到页面显示,这样既不影响页面显示也不受wx.getImageInfo异步加载问题。 1.首先后台请求回来数组dataList中包含图片的网络地址,默认为imgUrl; 2. var this=that; va...
canvas使用drawImage()方法绘制img和video的区别
drawImage()简介drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。具体参数 参数 描述 img 规定要使用的图像、画布或视频。 sx 可选。开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sh
微信小程序cavans.drawImage方法无法加载网络图片
微信小程序cavans.drawImage方法无法加载网络图片 canvas.drawImage(图片地址, 起始x坐标, 起始y坐标, 图片高, 图片宽)  图片地址src不能为网络地址:http://www.域名.com/项目/123.jpg  如果图片地址为网络地址则应该先调用wx.getImageInfo(OBJECT) wx.getImageInfo({ ...
微信小程序:真机上canvas使用canvasContext.drawImage图片不显示?
首先,明确两点,很多人的博客在写的时候,都是直接将图片的路径修改为网络路径,然后就再也不理,因为他们觉得这样是可以得,也许,这样是错的哦 第二点,腾讯的文档,最好跟着来,他不会跟你任何的扩展性的!!!!!!!!!!!!!!!!!!!!!!!!! 好了,先来段代码: // pages/T-canvas/T-canvas.js Page({ /** * 页面的初始数据 */
微信小程序之画布绘制并管理多张图片
在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片、文字等等进行操作,比如移动一下,旋转一下或者缩放等等。但普通的画布并没有对象记忆功能,它最终输出的只是一张图片,因此我们需要自己编写代码去保存绘制的对象,今天就跟大家简单说一下具体怎么实现。大家可以先看一下最终效果,可以对每个对象进行删除及旋转缩放操作。 一、...
mpvue微信小程序canvas画图,drawImage不显示
canvasContext.drawImage 定义 绘制图像到画布。 画网络图片到画布上,比如: // 首先需要把图片下载到本地才能开始画图 wx.downloadFile({ url: xxxx, success: function (res) { if (res.statusCode === 200) { ...
微信小程序canvas.drawImage方法无法加载网络图片解决方法
项目需求 对后台返回数据动态生成海报,可保存到手机相册。 网上大多的方法都是调用getImageInfo方法转本地图片 wx.getImageInfo({ src: 'http://www.域名.com/w.jpg', success: function (res) { context.drawImage(res.path...
小程序canvas中drawImage自适应宽度铺满屏幕
在微信小程序创建画布并且自适应屏幕宽度铺满屏幕 wxml先创建一个画布 <view class='page'> <button bindtap='click' type='primary' size='mini'>打开</button> <canvas class='canvas' canvas-id='myCanvas' disable-scr...
canvas画好几张图片时,叠层关系的问题
我们知道canvas画好几张图片时,按我们的思维应该是先画的在下面,后画的在最上面,可是事实不是这样的,细心的人会发现,叠层关系是随机的。 为什么呢? 这样想,我们画图片时是不是有这段代码 img.onload=function(){ ctx.drawImage(img,x,y); } 其实就是这段代码的问题,我们先分析一下这段代...
canvas实现不同透明度画图片星星
0.前因 最近跟星星杠上了,觉得用canvas自己画一个星星不仅复杂,可复用性也不高(主要原因是丑)。因此又再次研究了一下canvas直接画图。然后我就意识到自己之前绕远路了...... 1.canvas.drawImage可以直接把图片绘制到画布上 drawImage() 方法在画布上绘制图像、画布或视频。也能够绘制图像的某些部分,或者增加/减少图像的尺...
canvas中绘制图片居中
html:class="hide" id="can" width="490px" height="490px" > js:setImageURL(图片路径"); var image=new Image(); function setImageURL(url){ image.src=url; } var canvas=document.getElementById("can"); va
Canvas-drawImage 绘制图片模糊问题
最近遇到这样的问题,使用canvas输出图片,图片比canvas区域大,尺寸限制之后反而变得特别模糊: 代码: var c = document.getElementById("myimage");//canvas的id var ctx=c.getContext("2d"); var img=new Image(); im
js使用canvas的drawImage()绘制图片不显示
起因: 在使用canvas绘制图片时,发现根据w3cschool里面的绘制代码绘制图片显示不出来。 示例代码如下: <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="flo...
canvas的drawimage使图片失真变模糊的解决方法
这几天做了个刮刮卡的活动,用的是wScratchPad.js。发现刮开之后的图片变得好模糊,,解决方法是通过把canvas先放大一倍,然后再通过transform: scale(0.5);使canvas回到原来的尺寸最后还需要对wScratchPad的源码进行修改。修改前:修改后:这个解决了canvas进行transform: scale(0.5);处理后刮卡位置出现偏移的问题。最后刮出的效果为:...
【坑】在chrome浏览器中不能显示用context.drawImage画出的图
问题产生 在学习context给画布画图像的时候发现使用Firefox浏览器可以正常显示图像,而chrome则不行,经百度后知道是因为chrome浏览器会先加载javascript代码,之后才加载图片,这样就造成了我是用drawImage的时候那个图片并没有加载出来。 解决办法 把画图片到canvas的代码放在在image对象上onload事件中,就像这样 image.onload = f
测试Canvas的drawImage方法
html代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试drawImage</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <fieldset> <le
关于canvas无法通过drawImage加载的原因
在使用drawImage方法的时候,发现无法加载 var can = $('#mycanvas')[0]; var cxt = can.getContext('2d'); var bg = new Image(); bg.src = "img/bg.jpg";
微信小程序 canvas 绘图方法及安卓手机出现绘图不准解决方案
微信小程序的canvas诟病颇多,直到调试及出库 2.2.0 版本依然如此。 1. 微信 canvas 绘制也是一个异步函数,在 ctx.draw() 后面直接获取 canvasToTempPath 是不能获取到 canvas 的具体内容的。 2. 微信小程序有很多 bug,尤其在布局上,例如 z-index 无效,定位问题,拖动问题等;因此在界面上展示 canvas 绘制的内容时,通常使用 ...
drawImage()方法调用问题 Canvas
在canvas中 drawImage()的调用问题
Canvas drawImage 宽度和高度失效
canvas 在设置的时候 要   指定width 和height的大小才会有效。 和css style中的width 和height不同,若果没有在canvas中设置width 和 height ,那么在js中设置也是无效的。
Canvas 帧动画(封装成对象),绘制图片(drawImage())
person.js(封装的外部JS文件):(function( w ) { // 混入式继承( copy继承 ) function extend( o1, o2 ) { for ( var key in o2 ) { if ( o2.hasOwnProperty( key ) ) { o1[ key ...
前端图片格式与浏览器性能优化
在当前的静态或者动态界面中,图片是用户体验提升的重要的一部分。良好的图片设计会提升用户体验,并且对于浏览器优化具有很好的效果。接触图片设计和前端开发已经有两年时间,下面简单总结几点: 1.图片格式 传统的网页开发主要使用三种格式的图片:jpg、png、gif。这三种图片都是栅格图片(图片信息使用像素点进行存储),如果进行缩放会影响图片的视觉效果。 jpg(jpeg)格式使用范围最广。通常情况...
小程序drawImage()绘制网络图片生成图片保存到本地真机不显示
       标题有点绕,问题是这样的:小程序用canvas绘制一包含图片的内容使用自带的API:drawImage,然后将其生成图片保存到相册,pc端模拟器可以完美实现,然而真机生成图片没有所绘制的图片。 原因是这样的: 首先看小程序官方文档上drawImage的用法: const ctx = wx.createCanvasContext('myCanvas') wx.chooseIm...
微信小程序分享到朋友圈-遇到的问题drawImage真机不显示网络图片
网上有现成的例子,所以直接拿来用了,见链接,接下来说下自己遇到的问题      -&amp;gt;  因为在我的项目中,我的图片是网络图片,canvas上绘制的目前只支持本地图片,那应该怎么办呢?不可能图片是固定死的,所以只能另寻捷径了,前端开发者应该对资源的加载比较熟悉,网页上的图片都是网络图片,在显示时都会暂存在本地,有的直接在缓存中,可见chrome://cache/,所以我们在打开这个页面时,可以...
js实现两张图片合成一张图片(canvas绘图,图片合成)
收到一个需求把一个动态生成的二维码和页面背景图合并在一起供用户保存图片并分享朋友圈是现在邀请好友功能(微信自己的分享很容易被封).把自己遇到需要注意的点,写下来记录一下. 用两张图片的base64进行操作. 绘图代码: KaTeX parse error: Expected '}', got 'EOF' at end of input: … qcodeGenert(("#url").val()...
小程序的canvas 实现裁剪图片、圈选功能,drawImage和canvasToTempFilePath的配合使用。
记录一下刚步入的职场小白遇到的问题 1.前段时间遇到一个需求 在图中需要一个圈选功能就类似圈中想要的商品下单,刚看到这个需求的时候还是一头雾水,画那种矩形框还是简单的,可以需要裁剪矩形框内的内容不知从何下手,前端老大让我使用了一个叫 welCropper的插件使用截图,花了几天研究做了一个类似的功能可以效果差值甚远,没有圈选的功能只有一个简单的拉住矩形框截出图片,想着抱着侥幸最后果然还是被退回来了...
微信小程序canvas把正方形图片绘制成圆形
在微信小程序里效果图: 直接代码: &amp;lt;canvas style=&quot;width: 400px; height: 400px;border:1px solid red&quot; canvas-id=&quot;firstCanvas&quot;&amp;gt;&amp;lt;/canvas&amp;gt; //index.js Page({ data: { image: { src: ...
使用DrawImage函数进行拉伸绘制时出现的过度边沿现象
现象:         Gif播放时,图像的右侧及下侧有一条宽约5个像素的边,是从图片的边沿色到透明的渐变效果(这里的控件背景色为黄色)            解决过程:在图像显示到比它大的控件上进行拉伸时才有这样的现象,当显示到小于等于它的大小的控件上时,没有这样的现象;                   在网上查找资料得知,图像在使用DrawImage进行拉伸绘制时,会有渐变拉伸和平
canvas的drawImage()绘图片不显示问题
&lt;canvas id="myCanvas" width="200" height="100"&gt;&lt;/canvas&gt; var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="w3c.gif"; cxt.drawImage(img...
小程序 canvas注意事项(7)drawImage图片适配方式
在使用drawImage画网络图片时,需要画出的图片可能会与设计尺寸不符,此时绘制的图片会被压缩或者拉伸,十分不美观。 微信在1.9.0后支持设置更多属性来处理,方法如下 drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持 但是文档比较简单,试验过后发现不能满足需求QAQ,所以写了一些简单的处理 下...
canvas drawImage初次加载以及加载完成后事件
直接调用canvas的 drawImage()方法首次加载时图片不显示,解决方案是在Img.onload()方法中绘制图。但是如果以后需要不断的绘制该图片的时候就会一直调用onload事件,出现图片一闪一闪的现象,解决方案是根据Img.complete()方法判断图片是否加载完成。如下: var devBgImg = new Image(); devBgImg.src =th
HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt
微信小程序 canvas绘图 实现图片拉伸、压缩与裁剪
在canvas绘图时,通常会遇到的一种情况是用固定宽高来显示图片,如果直接把图片内容填充进去的话,显示出来的图片就会被压扁或者被挤瘦,其效果简直不忍直视!那么,就需要把图片进行拉伸、压缩或裁剪。 接下来,先给 drawImage 做个介绍: canvas的drawImage函数可以 绘制图像到画布。 它有以下参数: 参数 类型 说明 imageResource ...
canvas跨域加载图片的解决方法
在一次项目中, 需要用canvas绘制图片, 可是canvas绘制图片, 存在跨域问题, 就如下面的两个报错. execute 'toDataURL' Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has...
canvas 图片跨域(二)
在canvas 图片跨域(一)中,关于canvas跨域问题进行处理,提供的方法是后端提供base64文件资源,既把oss(图片URL),抓取到服务器,然后返回给客户端。      但上线以后,出现了很严重的问题,既资源占用太大。海报的生成 需要后端提供base64的资源,后端php解决办法三种:1.  每次需要的时候,curl 抓取路径的资源转为bse642. 只抓取一次,存入DB3. 只抓取一次...
Canvas 帧动画,绘制图像(drawImage())
demo.html:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; canvas {
小程序canvas导出图片模糊解决方法
wx.canvasToTempFilePath({ x: 0, y: 0, width: 200, height: 200, //复制 * 750 / wx.getSystemInfoSync().windowWidth,换算成rpx; destWidth: 5...