return FALSE; $r = well_tag_thread__update(array('id' => $id), $update); return $r; } function well_tag_thread_find($tagid, $page, $pagesize) { $arr = well_tag_thread__find(array('tagid' => $tagid), array('id' => -1), $page, $pagesize); return $arr; } function well_tag_thread_find_by_tid($tid, $page, $pagesize) { $arr = well_tag_thread__find(array('tid' => $tid), array(), $page, $pagesize); return $arr; } ?>javascript - Draw image with transparent background on canvas - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Draw image with transparent background on canvas - Stack Overflow

    javascript - Draw image with transparent background on canvas - Stack Overflow

    programmeradmin1浏览0评论

    I need to draw an image with transparent background on canvas. I have a code that should do that:

    var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = ".png"; //transparent png
    <canvas id="canvasId"></canvas>

    I need to draw an image with transparent background on canvas. I have a code that should do that:

    var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://i.sstatic/7JXBD.png"; //transparent png
    <canvas id="canvasId"></canvas>

    But the background is not transparent:

    • javascript
    • html
    • image
    • html5-canvas
    • transparent
    Share Improve this question edited Nov 13, 2018 at 9:25 Luca Kiebel 10.1k7 gold badges32 silver badges46 bronze badges asked Nov 13, 2018 at 8:34 лолка лолковичлолка лолкович 611 gold badge1 silver badge3 bronze badges 3
    • 5 The actual image is not transparent. – Jack Bashford Commented Nov 13, 2018 at 8:38
    • So what background should be to add transparency effect? Can u give a link to actual transparent image then? – лолка лолкович Commented Nov 13, 2018 at 8:40
    • no specific background. PNG allows a 4th channel, the alpha channel. So every pixel has a red, green, blue and alpha value (opacity) between 0 and 255 (in case of 8bit PNG). Also see this link, for when to use which image format: stackoverflow./q/2336522 – Martin Schneider Commented Nov 13, 2018 at 8:58
    Add a ment  | 

    2 Answers 2

    Reset to default 2

    Your code works perfectly - you just need an image with a transparent background - like this question mark:

    var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://i.sstatic/RPEQQ.png"; //transparent png
    <canvas id="canvasId"></canvas>

    And to prove it's not just got a white background image, I set the background image of the body to red:

    var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://i.sstatic/RPEQQ.png"; //transparent png
    body {
    background-color: red;
}
    <canvas id="canvasId"></canvas>

    The image that you are trying to display isn't transparent, it simply just has a transparent checkered background.

    A link to an image which does have a transparent background can be found here

    Using this link fixes your issue:

    var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50, 50, 500, 500); // something in the background

var img = new Image();
img.src = "https://cdn.sstatic/Sites/stackoverflow/img/[email protected]?v=73d79a89bded"; //transparent png
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}
    canvas {
  border: 1px solid black;
}
    <canvas id="canvasId" height="300" width="500"></canvas>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论