摘要:上個版本街道一個需求,使用生成一個二維碼,然后和另外一張圖片合成一張圖拍你,實現思路是這樣的使用將生成供使用然后使用將兩張圖合成一張圖片遇到的問題生成圖片之后發(fā)現圖片很模糊,解決辦法是將畫布擴大兩倍,其他參數也夸大兩倍就可以了可以使用
上個版本街道一個需求,使用url生成一個二維碼,然后和另外一張圖片合成一張圖拍你,
實現思路是這樣的
使用jr-qrcode將url生成data:base64供img使用
然后使用canvas 將兩張圖合成一張圖片
遇到的問題
生成圖片之后發(fā)現圖片很模糊,解決辦法是將canvas畫布擴大兩倍,其他參數也夸大兩倍就可以了
jr-qrcode 可以使用npm install --save jr-qrcode 安裝這個包
作用就是可以轉化text到data:base64 供img的src 使用
代碼如下
import React, { Component } from "react" const qrcode = require("jr-qrcode") const loadImg = (src) => { const paths = Array.isArray(src) ? src : [src]; const promise = []; paths.forEach((path) => { promise.push(new Promise((resolve, reject) => { let img = new Image(); img.crossOrigin = "Anonymous"; img.src = path; img.onload = () => { resolve(img); }; img.onerror = (err) => { console.log("圖片加載失敗") } })) }); return Promise.all(promise); } const getImageData = (url, src) => { const imgsrc = qrcode.getQrBase64(url) let canvas = document.createElement("canvas") const width = document.documentElement.clientWidth const height = document.documentElement.clientHeight canvas.width = width*2 canvas.height = height*2 let ctx = canvas.getContext("2d") loadImg([imgsrc, src]).then(([img1, img2]) => { ctx.drawImage(img2, 0, 0, width*2, height*2) ctx.drawImage(img1, width-80, height*2-220, 200, 160) ctx.fillStyle = "rgba(0,0,0,0.3)"; ctx.fillRect(width-80, height*2-60, 200, 40); ctx.save() ctx.font="28px Arial" ctx.fillStyle = "#fff"; ctx.fillText("長按識別二維碼", width-80, height*2-30, 200, 160) let imageURL = canvas.toDataURL("image/png") document.getElementById("mix_img").setAttribute("src",imageURL) }) } export default class QRcode extends Component { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return () } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96328.html
摘要:無需任何第三方依賴,輕型工具庫。繪制海報,生成帶的二維碼。默認重新編輯最終圖片壓縮比,默認基礎類型參數表示一個圖片部分。之間表示一個二維碼部分參數類型描述指定為二維碼類型要繪制的內容。通過控制邊框顏色,默認為默認為容錯等級。 canvas_x 無需任何第三方依賴,輕型工具庫。canvas繪制海報,生成帶logo的二維碼。也可生成編輯界面,用戶自定義輸入,一鍵生成等等 默認開啟圖片跨域,...
摘要:最近有個需求是要生成分享海報,讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求,可是萬萬沒想到,微信會這么坑。 最近有個需求是要生成分享海報,讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求,可是萬萬沒想到,微信會這么坑。剛開始的思路是這樣的: 后臺根據小程序傳過來的參數獲取對應的小程序碼,然后與背景圖合成之后將base64格式的圖片傳給小程...
閱讀 561·2023-04-26 02:58
閱讀 2301·2021-09-27 14:01
閱讀 3605·2021-09-22 15:57
閱讀 1168·2019-08-30 15:56
閱讀 1043·2019-08-30 15:53
閱讀 787·2019-08-30 15:52
閱讀 645·2019-08-26 14:01
閱讀 2157·2019-08-26 13:41