最近、ミニプログラムの開発過程で、背景透明効果機能を設定する必要があることに遭遇しました。Baidu のオープン インターフェイスを利用して切り抜き機能を実装するのは非常に便利ですが、最大の欠点の 1 つは金銭的なサポートが必要なことです。最後の手段として、インターネット上のさまざまなコードを使用して、キャンバスを使用した単色の背景の切り抜き機能を実現しました。これは非常に単純なアプリケーションです。まず効果を見てみましょう。
さて、ロジックを整理してコードの記述を完了しましょう。
1. ロジックの実装
1. 背景が単色の写真を用意します（私は白い背景を取り除くように設定しました）。
2. 画像をキャンバスに描画します (サイズ比率は変更しないでください)。
3. キャンバス上の各ピクセルをスキャンし、背景が白いピクセルの透明度を透明に設定します。
4. 設定した画像をキャンバス上に再描画します。
5. 完了します。背景色を透明に設定します。
2. コードの実装
実装ロジックに従って、次のようにコードを記述します。
1. wxml ファイルに Canvas タグを追加します。(クラススタイルは表示されなくなり、カスタマイズされます)
<canvas id="myCanvas" type="2d" class="mv-cvs"></canvas>2. 画像の背景色を削除するボタン イベントを追加します。
<button bindtap="clickBgd">背景透明</button>3. clickBgd にカットアウト コードを記述します。
clickBgd() {
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext("2d")
const image = canvas.createImage()
// const dpr = wx.getSystemInfoSync().pixelRatio
let that = this
// 图片加载完成回调
image.onload = () => {
// 将图片绘制到 canvas 上
let width = 300
let height = 150
console.log("width2:", width, ",height2:", height);
ctx.drawImage(image, 0, 0, width, height)
const imgDt = ctx.getImageData(0, 0, width, height)
const data = imgDt.data
for (let i = 0; i < data.length; i += 4) {
let r = data[i + 0]
let g = data[i + 1]
let b = data[i + 2]
data[i + 0] = 255
data[i + 1] = 0
data[i + 2] = 0
if ([r, g, b].every(v => v > 80 && v < 256)) {
data[i + 3] = 0
}
}
//清除画布之前的图片
ctx.clearRect(0, 0, 360, 360)
//创建新的图片数据
let nimgdt = canvas.createImageData(data, width, height)
ctx.putImageData(nimgdt, 0, 0)
//转成png格式的图片
let dtUrl = canvas.toDataURL("image/png")
console.log("dataurl:", dtUrl);
that.setData({
imgsrc: dtUrl,
})
}
// 设置要剔除背景色的图片src
image.src ="picture.jpg";
})
},3. 完全なコード
特定の完全なコードのリンク: https://download.csdn.net/download/m0_60318025/87894106