如何在JavaScript中将下载的画布图像的背景颜色设为白色？ [英] How can I make background color of downloaded canvas image white in JavaScript?

问题描述

我想做什么

我想知道如何将背景颜色设置为白色。

I使用画布构建了一个绘图应用程序。您可以通过在按住鼠标左键的同时移动鼠标来在画布上进行绘制。

您还可以通过单击下载按钮下载绘制的画布图像。但是它的背景颜色是黑色（技术上透明）。

如何将其更改为白色？

在此之前，我发布了相同的问题。有人建议我打开另一个问题，因为上一个问题中缺少大多数代码。这个问题有更多详细信息。

---

我尝试了什么

我在代码中添加了以下代码，但效果不佳。我什么都没画。

  ctx.fillStyle = #fff; 
 ctx.fillRect（0，0，canvas.width，canvas.height）; 
  

---

这是我的代码

HTML

 < button class = btn--下载>下载< / button> 
< canvas id = draw width = 640 height = 640>< / canvas> 
< a id = download_link>< / a> 
  

CSS

  #draw {
 display：block; 
保证金：0自动； 
背景：#fff; 
 border-radius：0.3em; 
 box-shadow：0 0.1rem 0.5rem 0.1rem rgba（43，12，1，0.1）; 
} 
  

JavaScript

  //画布
 const canvas = document.querySelector（'＃draw'）; 
 const ctx = canvas.getContext（’2d’）; 
 ctx.strokeStyle =‘＃BADA55’; 
 ctx.lineJoin ='round'; 
 ctx.lineCap ='round'; 
 ctx.globalCompositeOperation ='hue'; 
 // ctx.fillStyle = #fff; 
 // ctx.fillRect（0，0，canvas.width，canvas.height）; 
 //我删除了fillStyle& fillRect，因为我无法绘制任何东西。 
 
让isDrawing = false; 
让lastX = 0; 
让lastY = 0; 
 
函数draw（e）{
 if（！isDrawing）return; //如果不按下鼠标，则停止fn的运行。 
 console.log（e）; 
 ctx.beginPath（）; 
 ctx.moveTo（lastX，lastY）; 
 ctx.lineTo（e.offsetX，e.offsetY）; 
 ctx.stroke（）; 
 [lastX，lastY] = [e.offsetX，e.offsetY]; 
} 
 
 canvas.addEventListener（'mousedown'，（e）=> {
 isDrawing = true; 
 [lastX，lastY] = [e.offsetX ，e.offsetY]; 
}）; 
 
 canvas.addEventListener（’mousemove’，绘制）; 
 canvas.addEventListener（'mouseup'，（）=> isDrawing = false）; 
 canvas.addEventListener（'mouseout'，（）=> isDrawing = false）; 
 
 //另存为图片
 const downloadBtn = document.querySelector（’。btn--download’）; 
 const downloadLink = document.querySelector（’＃download_link’）; 
 const locale = new Date（）。toLocaleString（）; 
 const filename =`doodle $ {locale} .png`; 
 downloadBtn.addEventListener（'click'，downloadImage）; 
函数downloadImage（）{
 if（canvas.msToBlob）{
 const blob = canvas.msToBlob（）; 
 window.navigator.msSaveBlob（blob，文件名）; 
}否则{
 downloadLink.href = canvas.toDataURL（’image / png’）; 
 downloadLink.download =文件名; 
 downloadLink.click（）; 
} 
} 
  

我想将下载图像的背景色设为白色。

---

k3llydev

解决方案

就像我在以前的回答中提到的那样，在添加之后：

  ctx.fillStyle = #ffffff; 
 ctx.fillRect（0，0，canvas.width，canvas.height）; 
  

与您的代码冲突的是这一行：

  ctx.globalCompositeOperation ='色相'; 
  

它的作用是保留底层的亮度和色度，同时采用

正如我看到的代码所示，事实是您实际上不需要使用这种分层，因为您将只画线。因此，尝试删除它或将其替换为可以此处。

在此处查看其工作方式：

  const canvas = document.querySelector（'＃draw'）; const ctx = canvas.getContext（' 2d'）; ctx.strokeStyle ='＃BADA55'; ctx.lineJoin ='round'; ctx.lineCap ='round'; ctx.fillStyle = #ffffff; ctx.fillRect（0，0，canvas.width， canvas.height）;让isDrawing = false;让lastX = 0;让lastY = 0;函数draw（e）{if（！isDrawing）return; //如果不按下鼠标，则停止fn的运行。 console.log（e）; ctx.beginPath（）; ctx.moveTo（lastX，lastY）; ctx.lineTo（e.offsetX，e.offsetY）; ctx.stroke（）; [lastX，lastY] = [e.offsetX，e.offsetY];} canvas.addEventListener（'mousedown'，（e）=> {isDrawing = true; [lastX，lastY] = [e.offsetX，e.offsetY ];}）; canvas.addEventListener（'mousemove'，draw）; canvas.addEventListener（'mouseup'，（）=> isDrawing = false）; canvas.addEventListener（'mouseout'，（）=> isDrawing = false ）; //另存为图像const downloadBtn = document.querySelector（'。btn--download'）; const downloadLink = document.querySelector（'＃download_link'）; const locale = new Date（）。toLocaleString（）; const filename = `doodle $ {locale} .png`; downloadBtn.addEventListener（'click'，downloadImage）;函数downloadImage（）{if（canvas.msToBlob）{const blob = canvas.msToBlob（）; window.navigator.msSaveBlob（blob，文件名）; } else {downloadLink.href = canvas.toDataURL（’image / png’）; downloadLink.download =文件名； downloadLink.click（）; }}  

  #draw {display：block;保证金：0自动;背景：#fff;边界半径：0.3em; box-shadow：0 0.1rem 0.5rem 0.1rem rgba（43，12，1，0.1）;}  

 < button class = btn--download> Download< / button>< canvas id = draw width = 640 height = 640>< ; / canvas>< a id = download_link>< / a>  

What I want to do

I want to know how to make background color white.

I built a drawing app with canvas. You can draw on the canvas by moving mouse while holding down the left click.

You can also download the canvas image you have drawn by clicking the Download button. But its background color is black (technically transparent).

How can I change it to white?

I posted the same question before this. I was advised to open another question because most of the code is missing in my previous question. This question has more details.

---

What I tried

I added the following code to my code, but it didn't work well. I couldn't draw anything.

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

---

Here is my code

HTML

<button class="btn--download">Download</button>
<canvas id="draw" width="640" height="640"></canvas>
<a id="download_link"></a>

CSS

#draw {
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.3em;
  box-shadow: 0 0.1rem 0.5rem 0.1rem rgba(43, 12, 1, 0.1);
}

JavaScript

// Canvas
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.globalCompositeOperation = 'hue';
// ctx.fillStyle = "#fff";
// ctx.fillRect(0, 0, canvas.width, canvas.height);
// I removed fillStyle & fillRect because I couldn't draw anything due to them.

let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(e) {
  if (!isDrawing) return; // Stop the fn from running when they are not moused down.
  console.log(e);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

// Save as Image
const downloadBtn = document.querySelector('.btn--download');
const downloadLink = document.querySelector('#download_link');
const locale = new Date().toLocaleString();
const filename = `doodle${locale}.png`;
downloadBtn.addEventListener('click', downloadImage);
function downloadImage() {
  if (canvas.msToBlob) {
    const blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, filename);
  } else {
      downloadLink.href = canvas.toDataURL('image/png');
      downloadLink.download = filename;
      downloadLink.click();
  }
}

I want to make background color of downloaded image white.

---

k3llydev

解决方案

Like I mention on my previous answer, I found what is causing this issue with your code.

After adding:

ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

What is making conflict with your code is this particular line:

ctx.globalCompositeOperation = 'hue';

What this does is it preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.

As I see your code, the thing is that you don't really need to use this kind of layering since you will only draw lines. So, try to removing it or replacing it with another layering type that can be found here.

See it working here:

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(e) {
  if (!isDrawing) return; // Stop the fn from running when they are not moused down.
  console.log(e);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

// Save as Image
const downloadBtn = document.querySelector('.btn--download');
const downloadLink = document.querySelector('#download_link');
const locale = new Date().toLocaleString();
const filename = `doodle${locale}.png`;
downloadBtn.addEventListener('click', downloadImage);
function downloadImage() {
  if (canvas.msToBlob) {
    const blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, filename);
  } else {
      downloadLink.href = canvas.toDataURL('image/png');
      downloadLink.download = filename;
      downloadLink.click();
  }
}

#draw {
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.3em;
  box-shadow: 0 0.1rem 0.5rem 0.1rem rgba(43, 12, 1, 0.1);
}

<button class="btn--download">Download</button>
<canvas id="draw" width="640" height="640"></canvas>
<a id="download_link"></a>

这篇关于如何在JavaScript中将下载的画布图像的背景颜色设为白色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！