vue/uniapp canvas学习

学习资源

常用属性、方法

允许图片和 canvas 跨源使用 - HTML（超文本标记语言） | MDN

HTML 画布 | 菜鸟教程

以下代码示例【还存在未根据画布宽度，一行显示字体个数，有需要自行处理】 

    <canvas id="myCanvas" width="350" height="600" /> 

<script>
export default {
  name: 'Canvas',
  data() {
    return {
      canvas: {
        width: 350,
        height: 600,
        baseHeight: 200,
        driverHeight: 100,
        baseAddressHeight: 0
      },
      form: {
        id: 'xxxxxxx',
        name: 'hui',
        phone: '13688888888',
        address: '优雅永不过时，温柔永不落伍。'
      }
    }
  },
  mounted() {
    const AddressArr = []
    let firststr = 0
    for (var i = 0; i < this.form.address.length; i++) {
      if (firststr > this.form.address.length) {
        break
      }
      const str = this.form.address.substring(firststr, firststr + 18)
      AddressArr.push(str)
      firststr += 20
    }
    // console.log(AddressArr)
    if (AddressArr.length > 2) {
      const val = (AddressArr.length - 2) * 22
      this.canvas.baseAddressHeight = val
    }
    this.init()
  },
  methods: {
    init() {
      return new Promise((resolve, reject) => {
        const canvas = document.getElementById('myCanvas')
        const markctx = canvas.getContext('2d')
        markctx.fillStyle = '#f5f5f5'
        markctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

        markctx.fillStyle = '#fff'
        markctx.strokeStyle = '#F2F2F2'
        markctx.shadowBlur = 12
        markctx.shadowOffsetX = 2
        markctx.shadowOffsetY = 0
        markctx.shadowColor = '#d3d3d3'
        markctx.fillRect(10, 10, this.canvas.width - 20, this.canvas.baseHeight + this.canvas.baseAddressHeight)
        markctx.strokeRect(10, 10, this.canvas.width - 20, this.canvas.baseHeight + this.canvas.baseAddressHeight)

        markctx.fillStyle = '#000'
        markctx.font = '14px Arial'
        const firstHight = this.canvas.baseHeight / 4 - 15
        markctx.fillText('ID', 20, firstHight)
        markctx.fillText('姓名', 20, firstHight + this.canvas.baseHeight / 4)
        markctx.fillText('联系电话', 20, firstHight + (this.canvas.baseHeight / 4) * 2)
        markctx.fillText('个性签名', 20, firstHight + (this.canvas.baseHeight / 4) * 3)
        markctx.textAlign = 'right'
        markctx.fillText(this.form.id, this.canvas.width - 30, firstHight)
        markctx.fillText(this.form.name, this.canvas.width - 30, firstHight + this.canvas.baseHeight / 4)
        markctx.fillText(this.form.phone, this.canvas.width - 30, firstHight + (this.canvas.baseHeight / 4) * 2)

        let firststr = 0
        let addressNum = firstHight + (this.canvas.baseHeight / 4) * 3
        // let addressTextWidth = markctx.measureText(address).width
        for (var i = 0; i < this.form.address.length; i++) {
          if (firststr > this.form.address.length) {
            break
          }
          const str = this.form.address.substring(firststr, firststr + 18)
          // 绘制地址
          const numSpace = i > 0 ? 22 : -15
          addressNum = addressNum + numSpace
          if (this.form.address.length < 18) {
            markctx.fillText(str, this.canvas.width - 30, firstHight + (this.canvas.baseHeight / 4) * 3)
          } else {
            markctx.fillText(str, this.canvas.width - 30, addressNum)
          }
          firststr += 20
        }

        const auditY = this.canvas.baseHeight + this.canvas.baseAddressHeight
        markctx.textAlign = 'left'
        const secondNum = 55
        markctx.fillText('测试1：', 10, auditY + secondNum)
        markctx.fillText('测试2：', 10, auditY + secondNum * 2)
        markctx.fillStyle = '#EE0A25'
        markctx.fillText('test', 100, auditY + secondNum)
        markctx.fillText('test', 100, auditY + secondNum * 2)

        markctx.fillStyle = '#fff'
        markctx.strokeStyle = '#F2F2F2'
        markctx.shadowBlur = 12
        markctx.shadowOffsetX = 2
        markctx.shadowOffsetY = 0
        markctx.shadowColor = '#d3d3d3'
        markctx.fillRect(10, auditY + secondNum * 2.4, this.canvas.width - 20, this.canvas.driverHeight)
        markctx.strokeRect(10, auditY + secondNum * 2.4, this.canvas.width - 20, this.canvas.driverHeight)

        markctx.fillStyle = '#000'
        const secondBoxHeight = auditY + secondNum * 2.4 + (this.canvas.driverHeight - 40) / 2
        markctx.fillText('hui', 92, secondBoxHeight + 15)
        markctx.fillText('ID：xxxxxxxx', 92, secondBoxHeight + 35)

        // start图片位置 司机头像
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.src = 'https://img0.baidu.com/it/u=1435639120,2241364006&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697648400&t=434b65941f4610815f6fec9eeb0ab7ae'
        img.onload = function() {
          markctx.drawImage(img, 38, secondBoxHeight, 40, 40)
          setTimeout(() => {
            const dataURL = canvas.toDataURL('image/png')
            resolve(dataURL)
            // 预览
            // let generateImg = document.createElement("img");
            // generateImg.src = dataURL;
            // document.body.appendChild(generateImg);
            // 保存本地
            //      var save_link = document.createElement("a");
            // save_link.href = dataURL;
            // save_link.download ="分享图.png";

            // let clickevent = document.createEvent("MouseEvents");
            // clickevent.initEvent("click", true, false);
            // save_link.dispatchEvent(clickevent);
          }, 300)
        }
        // end图片位置
        //   setTimeout(() => {
        // 	const url = canvas.toDataURL()
        //   console.log(url);
        // },300)
      })
    },
    /**
     * Base64字符串转File文件
     * @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
     * @param {String} filename 文件名称
     */
    dataURLtoFile(dataurl, filename) {
      return new Promise((resolve, reject) => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        const val = new File([u8arr], filename, {
          type: mime
        })
        resolve(val)
      })
    }
  }
}
</script>

uniapp 常用属性、方法【有些参数没写，自行修改】

uni-app官网

<canvas :style="{width: canvas.width + 'px',height: canvas.height+ 'px'}" canvas-id="myCanvas"
            id="myCanvas"></canvas> 

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	let canvas = reactive({
		width: 350,
		height: 600,
		baseHeight: 200,
		secondHeight: 100,
		baseAddressHeight: 0
	})
	let address = '优雅永不过时，温柔永不落伍。温柔永不落伍'
	onLoad(() => {
		// 获取系统信息，为 camera 组件设置高度
		uni.getSystemInfo({
			success: function(res) {
				canvas.width = res.windowWidth
				// data.height = res.windowHeight
			}
		});
		init()
		
	})
	
	function init(){
		 const AddressArr = []
		    let firststr = 0
		    for (var i = 0; i < address.length; i++) {
		      if (firststr > address.length) {
		        break
		      }
		      const str = address.substring(firststr, firststr + 15)
		      AddressArr.push(str)
		      firststr += 15
		    }
		    // console.log(AddressArr)
		    if (AddressArr.length > 2) {
		      const val = (AddressArr.length - 2) * 22
		      canvas.baseAddressHeight = val
		    }
			generateImg()
	}

	
	// 保存相册
	function saveImg(path) {
		// 已经授权
		uni.saveImageToPhotosAlbum({
			filePath: path,
			complete(res) {
				// console.log('保存图片', res);
			}
		})
	}

	// 合成图片
	function generateImg() {
		return new Promise((resolve, reject) => {
			createCanvas().then(() => {
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success(res) {
							uni.hideLoading()
							resolve(res.tempFilePath)
						},
						fail(err) {
							uni.hideLoading()
							reject('合成失败')
						}
					})
				}, 300)
			})
		})
	}

	// 创建画布
	function createCanvas() {
		uni.showLoading({
			mask: true
		})
		return new Promise((resolve, reject) => {
			const markctx = uni.createCanvasContext('myCanvas')
			markctx.setFillStyle('#f5f5f5'); // 设置颜色为白色
			markctx.rect(0, 0, canvas.width, canvas.height + canvas.baseAddressHeight)
			markctx.fillRect(0, 0, canvas.width, canvas.height + canvas.baseAddressHeight)
			markctx.save() // 保存上下文

			markctx.restore() // 恢复
			markctx.setFillStyle('#fff');
			markctx.setStrokeStyle('#F2F2F2')
			markctx.setShadow(2, 0, 12, '#d3d3d3')
			markctx.fillRect(10, 10, canvas.width - 20, canvas.baseHeight)
			markctx.strokeRect(10, 10, canvas.width - 20, canvas.baseHeight)
			markctx.save() // 保存上下文

			markctx.restore() // 恢复
			markctx.setFillStyle('#000');
			markctx.setFontSize(14)
			let firstHight = (canvas.baseHeight / 4) - 15
			markctx.fillText('ID', 20, firstHight);
			markctx.fillText('姓名', 20, firstHight + (canvas.baseHeight / 4))
			markctx.fillText('联系电话', 20, firstHight + ((canvas.baseHeight / 4) * 2))
			markctx.fillText('个性签名', 20, firstHight + ((canvas.baseHeight / 4) * 3))

			markctx.setTextAlign('right')
			markctx.fillText('xxxxxxxxxxxxxxxx', canvas.width - 30, firstHight)
			markctx.fillText('hui', canvas.width - 30, firstHight + ((canvas.baseHeight / 4)))
			markctx.fillText('13688888888', canvas.width - 30, firstHight + ((canvas.baseHeight / 4) * 2))
			let firststr = 0
			let addressNum = firstHight + ((canvas.baseHeight / 4) * 3)
			for (var i = 0; i < address.length; i++) {
				if (firststr > address.length) {
					break
				}
				let str = address.substring(firststr, firststr + 15)
				// 绘制地址
				let numSpace = i > 0 ? 22 : -15
				addressNum = addressNum + numSpace
				if (address.length < 15) {
					markctx.fillText(str, canvas.width - 30, firstHight + (canvas.baseHeight / 4) * 3)
				} else {
					markctx.fillText(str, canvas.width - 30, addressNum)
				}
				firststr += 15
			}

			markctx.save() // 保存上下文

			markctx.restore() // 恢复
			markctx.setTextAlign('left')

			let secondNum = 55
			        const auditY = canvas.baseHeight + canvas.baseAddressHeight

			markctx.fillText('测试1：', 10, auditY + secondNum)

			markctx.fillText('测试2：', 10, auditY + secondNum * 2)
			markctx.save() // 保存上下文
			markctx.restore() // 恢复
			markctx.setFillStyle('#EE0A25');
			markctx.setFontSize(14)
			markctx.fillText('111111111', 100, auditY + secondNum)
			markctx.fillText('1111111', 100, auditY + secondNum * 2)

			markctx.save() // 保存上下文
			markctx.restore() // 恢复
			markctx.setFillStyle('#fff');
			markctx.setStrokeStyle('#F2F2F2')
			markctx.setShadow(2, 0, 12, '#d3d3d3')
			markctx.fillRect(10, auditY + secondNum * 2.4, canvas.width - 20, canvas.secondHeight)
			markctx.strokeRect(10, auditY + secondNum * 2.4, canvas.width - 20, canvas.secondHeight)


			markctx.save() // 保存上下文
			markctx.restore() // 恢复
			markctx.setFillStyle('#000');
			markctx.setFontSize(14)

			// start图片位置 头像
			let secondBoxHeight = auditY + secondNum * 2.4 + (canvas.secondHeight - 40) / 2
			let avatar =
				'https://img0.baidu.com/it/u=1435639120,2241364006&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697648400&t=434b65941f4610815f6fec9eeb0ab7ae'
			markctx.fillText('姓名', 92, secondBoxHeight + 15)

			markctx.fillText('ID：xxxxxxxx', 92, secondBoxHeight + 35)

			if (avatar) {
				// 网络资源
				uni.getImageInfo({
					src: avatar,
					success(res) {
						markctx.drawImage(res.path, 38, secondBoxHeight, 40, 40)
						markctx.draw() // 注意这个，否则图片无法写入
						resolve()
					}
				})
			} else {
				// 本地地址
				markctx.drawImage('/static/account/user.png', 38, secondBoxHeight, 40, 40)
				markctx.draw()
				resolve()
			}

			// end图片位置


		})

	}
</script>