pngなどの透過画像をcanvasで重ねたかったのですが、いい感じのまとまった記事がなかったのでこちらでまとめています。
しかも自分の重ねたい方法は、 操作している画像が固定されている画像の下に常に存在するようにする 、というもので見つけるのが大変でした。フレーム画像の下で画像編集をしたいときなどに使えると思います。
透過画像はこちらで手に入れました。
鍵となるのは
globalCompositeOperation
です。これを見つけるのにすごく時間がかかりました、、、
destination-over
をつかうことによって、元からある図形の下に描画ができるようになります。また、一番上の画像は今回selectableを解除しています。
index.vue
<template>
<h1>画像編集ページ</h1>
<div class="wrapper">
<canvas id="canvas" width="300" height="300" />
</template>
<script lang="js">
import { onMounted, computed, defineComponent } from '@nuxtjs/composition-api'
import { fabric } from 'fabric'
export default defineComponent({
setup() {
const canvas = computed(() => new fabric.Canvas('canvas'))
onMounted(() => {
// globalCompositeOperation: https://stackoverflow.com/questions/43455582/how-correctly-apply-globalcompositeoperation-on-canvass-elements
fabric.Image.fromURL(
require('~/assets/images/sample/ocean.png'),
myImg => {
// i create an extra var for to change some image properties
myImg.scaleToWidth(canvas.value.getWidth())
myImg.set(
left: 0,
top: 0,
width: 2000,
height: 2000,
selectable: false,
canvas.value.add(myImg)
fabric.Image.fromURL(
require('~/assets/images/sample/seagull.png'),
myImg => {
// i create an extra var for to change some image properties
myImg.scaleToWidth(canvas.value.getWidth())
myImg.set(
left: 100,
top: 100,
width: 1000,
height: 1000,
globalCompositeOperation: 'destination-over',
canvas.value.add(myImg)
return { }
</script>
<style scoped>
.wrapper {
width: 100%;
height: 100%;
border: 1px solid;
</style>