kuckboy1994 / mp_canvas_drawer Goto Github PK
View Code? Open in Web Editor NEW:rocket: 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
License: MIT License
:rocket: 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
License: MIT License
先从canvasdrawer.wpy文件中找到画图的这个方法drawImage。然后直接替换下面的代码就可以。
drawImage(params) { this.ctx.save(); const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0 } = params; if(borderRadius){ let d = borderRadius * 2; let cx = left + borderRadius; let cy = top + borderRadius; this.ctx.beginPath(); this.ctx.arc(cx, cy, borderRadius, 0, 2 * Math.PI); this.ctx.fill(); this.ctx.clip(); this.ctx.drawImage(url, left, top, d, d); }else{ this.ctx.drawImage(url, left, top, width, height); } this.ctx.restore(); }
borderRadius 是圆的半径,image类型的json里加这个属性的时候你画出来的是圆形图。
下面是画圆角矩形,rect类型的json里加一个radius(圆角半径)属性就可以画圆角矩形。
drawRect(params) { this.ctx.save(); const { background, top = 0, left = 0, width = 0, height = 0, radius = 0 } = params; this.ctx.setFillStyle(background); if(radius){ // 开始绘制 this.ctx.beginPath(); // 左上角 this.ctx.arc(left + radius, top + radius, radius, Math.PI, Math.PI * 1.5); // border-top this.ctx.moveTo(left + radius, top); this.ctx.lineTo(left + width - radius, top); this.ctx.lineTo(left + width, top + radius); // 右上角 this.ctx.arc(left + width - radius, top + radius, radius, Math.PI * 1.5, Math.PI * 2); // border-right this.ctx.lineTo(left + width, top + height - radius); this.ctx.lineTo(left + width - radius, top + height); // 右下角 this.ctx.arc(left + width - radius, top + height - radius, radius, 0, Math.PI * 0.5); // border-bottom this.ctx.lineTo(left + radius, top + height); this.ctx.lineTo(left, top + height - radius); // 左下角 this.ctx.arc(left + radius, top + height - radius, radius, Math.PI * 0.5, Math.PI); // border-left this.ctx.lineTo(left, top + radius); this.ctx.lineTo(left + radius, top); // 这里是使用 fill 还是 stroke都可以,二选一即可,但是需要与上面对应 this.ctx.fill(); this.ctx.closePath(); }else{ this.ctx.fillRect(left, top, width, height); } this.ctx.restore(); }
请问下绘制canvas的时候图片怎么旋转
{ type: 'text', content: 'this is text', fontSize: 30, color: '#402D16', textAlign: 'center', top: 270, right: 0 },
我设置文案居中或者居右的时候没有效果,只有居左的时候可以显示
` drawImage(params) {
const { url, top = 0, left = 0, width = 0, height = 0, circleRadius = 0, color = '#eeeef0' } = params
this.ctx.save()
if (circleRadius) {
this.ctx.beginPath()
this.ctx.arc(left, top, circleRadius, 0, 2 * Math.PI);
this.ctx.setStrokeStyle(color)
this.ctx.stroke(); // 进行绘制
this.ctx.clip();
this.ctx.drawImage(url, left - circleRadius, top - circleRadius, width, height)
} else {
this.ctx.drawImage(url, left, top, width, height)
}
this.ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制
}`
坑爹啊,测试体验版都没问题上线就报错unhandled promise rejection
比如我绘制的像素是750*1148,如果拿iphone6plus绘制保存的图就是原来像素乘以3,请问如何解决这个问题
首先,你这个组件很棒!然后在一些使用场景里,是有对内容进行换行,但不作内容省略的(不管有多少字都继续换行),感觉可以出个配置参数做不省略处理。
vivo手机绘制文本出现重复现象。且字体,颜色不一致
设置了textAlign:‘center’
,但是并没有居中。请问要如何设置才能使文字居中?
电商分享因产品图片长宽比不一样,显示出图片失去过去的长宽比,此处优化好一点,在getImageInfo方法重新按比例算出图的width及left的大小
大概就是点击条目1生成一张图片 但是点击条目2依然会生成1的图片,再次点击会好,我看代码里面添加了缓存的方式,不知道有无动态设置这一属性的方法?
md, 既然不支持base64图片,这怎么搞
rect 可以设置圆角吗?
能否将二进制的图片绘制出来呢?
Found this repo at https://github.com/trending/javascript?since=daily
Please read https://blog.codinghorror.com/the-ugly-american-programmer/
最上方的标题重复错位
有未不基于小程序的版本?HTML5 朋友圈里面需求也多,但只在微信里面就不好玩了
你好,我点击绘制之后,就一直显示绘制分享图片中 然后没有图片出来,是怎么回事啊,谢谢
这个可以引入到mpvue里边使用吗?如果不可以的话可以改一下吗?让我们广大的mpvue使用者为你点赞
有的安卓手机生成的时候,样式和设置的不一样,会出现重叠等问题
文字有时候一行,有时候很多行,这样就会造成很多问题,1️⃣整个页面高度不确定 2️⃣文字下方的图片如何定位
提了pr给你,修复了安卓生成图片文字错位的bug。@kuckboy1994
https://github.com/qizf7/mp_canvas_drawer
如题,这两串官方代码都是在wxml里面用的啊,但你的绘制是在js完成,有啥办法用上:
你好,我绘制两张图片,一张是大背景,一张是二维码,理论上我第二次绘制二维码的时候是覆盖在第一张上面的,为什么不显示,我自己手写canvas的时候是可以的,但是你的组件却不显示???
我用canvas画出了海报,然后固定定位在屏幕中间,这个disable-scroll属性也加了,父元素也设置了overflow-y:hidden; 但是这个海报还是能上下滚动,求解
为啥绘制出来的图是透明的,设置clear是false有不起作用。
能否把这些基本的用法,详细再写写,还有left、right也有点乱,textAlign的center不起作用啊。
十分感谢你开发了原生组件以及mpvue版本的canvas_drawer!
根据你的代码,我移植开发了wepy版本,希望能加入您的文档里!
地址:wepy_canvas_drawer
添加的 text 是大段文本,文本中自带了换行,
组件默认清除了换行,凑成了一行,
只能自己把文本截取成一个数组绘制,希望可以优化
PC完美,真机调试很慢(真的非常慢,iPhone se),但是能出来,但是真机出不来
wxml代码
<block wx:if="{{showShareImage}}"> <image src="{{shareImage}}" style="height: {{windowHeight}}px;top: {{scrollTop}}px;" class="share-image"></image> </block> <block wx:if="{{showSaveBtn}}"> <button class="saveImg" style="top: {{scrollTop+windowHeight-50}}px;" bindtap="eventSave">保存图片到相册</button> </block> <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
js代码
eventDraw () { wx.showLoading({ title: '绘制分享图片中', mask: true }) this.setData({ showShareImage:true, showSaveBtn:true, painting: { width: 375, height: 555, clear: true, views: [ { type: 'image', url: 'http://retail.26460000.com/share.jpeg', top: 0, left: 0, width: 375, height: 555 }, { type: 'image', url: '/image/sys/redlogo.png', top: 27.5, left: 35, width: 120, height: 60 }, { type: 'text', content: '大兴二手车', fontSize: 16, color: '#402D16', textAlign: 'left', top: 33, left: 160, bolder: true }, { type: 'text', content: '您值得信赖的二手车专家', fontSize: 15, color: '#563D20', textAlign: 'left', top: 59.5, left: 160 }, { type: 'image', url: this.data.car.releaseRetail.mainPicPath, top: 136, left: 42.5, width: 290, height: 186 }, { type: 'image', url: '/image/sys/8cm.jpg', top: 435, left: 50, width: 100, height: 90 }, { type: 'text', content: this.data.car.releaseRetail.spOneSentenceAd +" "+ this.data.car.releaseRetail.modelName, fontSize: 16, lineHeight: 21, color: '#383549', textAlign: 'left', top: 336, left: 44, width: 287, MaxLineNumber: 2, breakWord: true, bolder: true }, { type: 'text', content: '¥'+this.data.car.releaseRetail.internetPrice+"万", fontSize: 19, color: '#E62004', textAlign: 'left', top: 387, left: 44.5, bolder: true }, { type: 'text', content: '新车指导价:¥'+this.data.car.releaseRetail.newCarPrice+"万", fontSize: 13, color: '#7E7E8B', textAlign: 'left', top: 391, left: 140, textDecoration: 'line-through' }, { type: 'text', content: '长按识别图中二维码', fontSize: 14, color: '#383549', textAlign: 'left', top: 460, left: 165.5, lineHeight: 20, MaxLineNumber: 2, breakWord: true, width: 125 } , { type: 'text', content: '海量优质二手车', fontSize: 14, color: '#383549', textAlign: 'left', top: 480, left: 165.5, lineHeight: 20, MaxLineNumber: 2, breakWord: true, width: 125 } ] } }) }, eventSave () { var that = this; wx.saveImageToPhotosAlbum({ filePath: this.data.shareImage, success (res) { wx.showToast({ title: '保存图片成功', icon: 'success', duration: 2000 }) that.setData({ showShareImage: false, showSaveBtn:false }) } }) }, eventGetImage (event) { console.log(event) wx.hideLoading() const { tempFilePath, errMsg } = event.detail if (errMsg === 'canvasdrawer:ok') { this.setData({ shareImage: tempFilePath, showSaveBtn:true }) } },
md,bug真tmd的多,还没人解决
绘制出来的图片有时候某些样式会失效
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.