xd-tayde / mcanvas Goto Github PK
View Code? Open in Web Editor NEW用于合成图片的canvas绘制库
Home Page: http://www.guoxiaodong.net
用于合成图片的canvas绘制库
Home Page: http://www.guoxiaodong.net
如何设置图片的高度?
RT
Unhandled promise rejection Error {
message: "Cannot read property '1' of null ",
stack: "TypeError: Cannot read property '1' of null at Object.isIos8 "
}
看了下是由于utils.js文件中isIos8函数UA判断异常引起:flag = IPAD ? UA.match(/cpu os (\d*)/)[1] < 9 : UA.match(/iphone os (\d*)/)[1] < 9
npm 安装路径404
调用draw()时 console.log()输出base64值没打印出来
我是在 React native 中使用的
MCanvas.prototype._init = function () {
this.canvas = document.createElement('canvas');
this.canvas.width = this.ops.width;
this.canvas.height = this.ops.height;
this.ctx = this.canvas.getContext('2d');
this.ops.backgroundColor && this.setBgColor(this.ops.backgroundColor);
};
document.createElement('canvas');
这一句报错了,该怎么处理呢?
怎么在vue应用啊?请问一下
请问什么时候发布2.0,期待支持node.js
使用node.js 渲染,以此突破ios限制
没有全局MC对象,DMEO跑不起来!
RT,谢谢
Node side has image merge demand. And in most cases. node-canvas has a same api compare to Web-Based Canvas.
您好,请问如果可以做到不论图片宽高多少,只能在这个区域显示。。,让图片铺满这个区域。图片是通过微信选择的图片。。
引入之后 直接new Mcanvas() 提示找不到 请教该如何使用呢? 能不能像jQuery一样那样 引入js后 直接使用呢? 前端菜鸟,跪求大神解答
createCertificateBase64 () {
let _this = this
const mc = new MCanvas({
width: 1025,
height: 1455,
backgroundColor: '#fff'
})
mc.background(image), {
type: 'origin',
color: '#ffffff'
})
// 由于异步的缘故,因此只有在该回调中,才能取到 base64 和 各项配置系数;
mc.draw({
// 导出图片格式: png/jpg/jpeg/webp;
// default : png;
type: 'jpg',
// 图片质量,对 png 格式无效; 0~1;
quality: 0.9,
// 成功回调;
success (b64) {
console.log(b64)
},
// 错误回调;
error (err) {
console.log(err)
}
})
}
示例里.text的lineheight 应为 lineHeight
按示例做没效果,查源码才发现应为大写
请问文字可以rotate方向吗..
rt
VUE中怎么用?
const that = this;
const mc = new MC({
width: 684,
height: 214,
backgroundColor: '#fff'
});
mc.background('https://view.didistatic.com/static/dcms/5p5vwvyjrfk8zkurgo_684x219_compress.png', {
left: 0,
top: 0,
type: 'origin',
}).text('迎新年发劵', {
pos: {
x: 38,
y: 30,
},
normalStyle: {
font: '36px Microsoft YaHei,sans-serif',
}
}).text('加油8.8折 轻松享受', {
pos: {
x: 44,
y: 88 - 9,
},
normalStyle: {
font: '300 24px Microsoft YaHei,sans-serif',
color: '#a6a6a6',
}
}).text('立即领取', {
pos: {
x: 54,
y: 134,
},
normalStyle: {
font: '20px Microsoft YaHei,sans-serif',
color: 'white',
}
}).draw({
type: 'jpg',
quality: 1,
success(b64) {
that.setState({
pic: b64,
});
},
error(err) {
console.log('err=', err);
}
});
请问 mc.background 和 .add 支持 base64 图片吗
const MCanvas = require('mcanvas')
const mc = new MCanvas({
width: 854,
height: 480,
backgroundColor: 'transparent'
})
这一段代码报错了.....
如题所示,请问是否支持传入base64格式作为底图?
let mc = new MC({
// width: 1000,
// height: 1000,
// backgroundColor: 'black',
});
// background : 准备底图;提供多种模式
mc.background(bg, {
left: 0,
top: 0,
color: '#FFFFFF',
type: 'origin',
})
// add 添加图片素材基础函数;
.add(userHeadImg, {
width: 130,
height: 130,
pos: {
x: 30,
y: 30,
rotate: 1,
},
})
// add 添加图片素材基础函数;
.add(ercode, {
width: 200,
pos: {
x: 515,
y: 1090,
},
})
// text 添加文字数据基础函数;
.text(user.nickname, {
width: '300px',
smallStyle: {
// 字体颜色;
color: '#ffffff',
},
pos: {
x: 180,
y: 50,
},
})
.text(shareDesc, {
width: '300px',
smallStyle: {
// 字体颜色;
color: '#FFF',
// 文字渐变
gradient: {
type: 2, // 1: 横向渐变; 2: 纵向渐变;
colorStop: ['red', 'blue'],
},
},
pos: {
x: 180,
y: 90,
},
})
// draw 最终绘制函数,用于最终的绘制;
.draw(b64 => {
that.$data.shareCanvasImg = b64
});
如题,直接设置color貌似不行?请问有这个api吗?
“img load error ”这个错误一般是什么情况下会出现?我在PC和手机浏览器测过都没问题,唯独微信里面有这个问题,跑不通,求解,谢谢
在‘add()’的时候报错
你好,目前我使用react native进行App开发,打算实现图像的绘制(合成),我看到你的库好像能够方便实现这个功能,但是基于Canvas,我试了下好像是用不了,请问有什么别的库推荐支持RN的吗?
现在默认是根据画布的百分比吧 然后如果每个都要自己写width的话 感觉工作量很大 能否基于素材本身宽度呢
之前有个BUG是单边有黑色边框,现在又出现了是背景图有阴影的话,阴影处变成黑边,黑边大小受阴影大小决定
您好,想问下text方法里,能设置font-face么,想自定义字体该怎么办呢,谢谢
给文字设字号,但是不论怎么设置,字体大小还一直是默认的字号,不会改变。请问下是什么原因呢?
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.