• 当前标签:canvas

程序开发 js网络图片通过canvas获取图片颜色

依赖于 rgbaster 包, 安装rgbaster: yarn add rgbaster import analyze from 'rgbaster' export default { mounted() { this.getBackground() }, methods: { getBackground() { const that = this function getBase64Image(img, suffix) { let canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) const dataURL = canvas.toDataURL('image/' + suffix) // 可选其他值 image/jpeg canvas = null // 释放 return dataURL } function getColors(src, cb) { const image = new Image() const splits = src.split('.') const suffix = splits[splits.length - 1] image.setAttribute('crossOrigin', 'anonymous') // 支持跨域图片 image.src = src + '?v=' + Math.random() // 处理缓存 image.onload = function () { const base64 = getBase64Image(image, suffix) cb && cb(base64) } } getColors('https://cdn.huangliangbo.com/wp-content/uploads/2019/04/zh-2.jpg', async function (base64) { const result = await analyze(base64, { scale: 0.6 }) // also supports base64 encoded image strings that.bgColor = result[0].color }) } } } 部分内容来着:canvas图片问题浅析、JS将图片转为base64编码

2019-07-11 14:36:24 144 1 0
阅读详情

程序开发 小程序canvas文字自动换行,回车符自动换行

const ctx = wx.createCanvasContext('customCanvas') // 文字自动换行 function fillText(height, text, cb) { var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; ctx.setFontSize(14) for (var a = 0; a < chr.length; a++) { if ((chr[a] == '\n') || (chr[a] == '↵') || (chr[a] == '\r') || (chr[a] == '\r\n')) { // 如果有回车符则换行 row.push(temp); temp = ""; } else if (ctx.measureText(temp).width < 295) { temp += chr[a]; } else { a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比 row.push(temp); temp = ""; } } row.push(temp); //如果数组长度大于2 则截取前两个 // if (row.length > 2) { // var rowCut = row.slice(0, 2); // var rowPart = rowCut[1]; // var test = ""; // var empty = []; // for (var a = 0; a < rowPart.length; a++) { // if (ctx.measureText(test).width < 220) { // test += rowPart[a]; // } // else { // break; // } // } // empty.push(test); // var group = empty[0] + "..."//这里只显示两行,超出的用...表示 // rowCut.splice(1, 1, group); // row = rowCut; //

2019-03-28 19:36:09 76 0 0
阅读详情
  • 1
前往