创建带有img标签的文本节点的子串时禁止下载图片

location /images/ {
    add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
}

<img id="myImage" src="path/to/image.jpg" alt="My Image">
<canvas id="myCanvas"></canvas>

<script>
    const img = document.getElementById('myImage');
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
    };

    // 如果需要导出为Data URL
    const dataURL = canvas.toDataURL('image/png');
</script>

<div class="image-background"></div>

<style>
    .image-background {
        width: 300px;
        height: 200px;
        background-image: url('path/to/image.jpg');
        background-size: cover;
    }
</style>