1 / 1 / 0
Регистрация: 21.04.2022
Сообщений: 12
1

Ошибка испорченный холст

23.06.2022, 22:31. Показов 356. Ответов 1

Author24 — интернет-сервис помощи студентам
Как исправить ошибку испорченного холста, и сделать так, чтобы изображение сохранялось?
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>www</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="jsCanvas" class="canvas"></canvas>  
  </div>
    <div class="controls">
      <div class="controls__range">
        <input type="range" id="jsRange" min="1.0" max="16.0" value="8.0" step="1.0">
      </div>
      <div class="controls__btns">
        <button id="jsMode">Рисовать</button>
        <button id="jsClear">Очистить</button>
        <button id="jsSave">Сохранить</button>
      </div>
        <div class="controls__colors" id="jsColors">
            <div class="controls__color jsColor" style="background-color:red"></div>
            <div class="controls__color jsColor" style="background-color:orangered"></div>
            <div class="controls__color jsColor" style="background-color:yellow"></div>
            <div class="controls__color jsColor" style="background-color:green"></div>
            <div class="controls__color jsColor" style="background-color:rgb(0, 162, 232)"></div>
            <div class="controls__color jsColor" style="background-color:blue"></div>
            <div class="controls__color jsColor" style="background-color:purple"></div>
            <div class="controls__color jsColor" style="background-color:#000000"></div>
            <div class="controls__color jsColor" style="background-color:rgb(87, 87, 87)"></div>
            <div class="controls__color jsColor" style="background-color:white"></div>
            <div class="controls__color jsColor" style="background-color:rgb(0, 255, 0)"></div>
            <div class="controls__color jsColor" style="background-color:fuchsia"></div>
        </div>
    </div>
  <script src="app.js"></script>
</body>
</html>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
const btn = document.getElementById('jsClear');
const mode = document.getElementById('jsMode');
const canvas = document.getElementById('jsCanvas');
const colors = document.getElementsByClassName ('jsColor');
const ctx = canvas.getContext('2d');
const range = document.getElementById('jsRange');
const saveBtn = document.getElementById('jsSave');
 
let img = new Image();
img.src = "https://catherineasquithgallery.com/uploads/posts/2021-03/1614612398_1-p-fon-neba-dlya-fotoshopa-1.jpg";
window.addEventListener('load', function() {
  ctx.drawImage(img, 0, 0, 540, 675);
});
 
let painting = false;
 
canvas.height=675;
canvas.width=540;
 
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = '#0c0c0c';
 
function onClear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 540, 675);
}
 
function handleColorClick(event){
  const color = event.target.style.backgroundColor;
  ctx.strokeStyle = color;
}
 
function handleRangeChange(event){
  const rangeValue = event.target.value;
  ctx.lineWidth = rangeValue;
}
 
function handleModeClick(){
  if (painting === true){
      painting = false;
      mode.innerText = 'Рисовать';
  } else {
    painting = true;
      mode.innerText = 'Штамп';
  }
  }
 
var image = new Image;
image.src = 'https://www.pinclipart.com/picdir/big/285-2856763_tangled-sun-png-clipart-transparent-png.png';
function drawIfPressed(e) {
console.log(e.type)
var x = e.offsetX;
var y = e.offsetY;
var dx = e.movementX;
var dy = e.movementY;
  if (e.type == 'click' && !painting) {
    var width = 40;
ctx.drawImage(image, x - width / 2, y - width / 2, width, width);
 } else if (e.buttons > 0 && painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x - dx, y - dy);
    ctx.stroke();
    ctx.closePath();
}
}
 
function handleCM(event){
  event.preventDefault();
}
 
function handleSaveClick(){
  const Image = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = Image;
  link.download = "download.png";
  link.click();
}
0
canvas.addEventListener('mousemove', drawIfPressed);
canvas.addEventListener('click', drawIfPressed);
canvas.addEventListener('contextmenu', handleCM);
btn.addEventListener('click', onClear);
 
Array.from(colors).forEach(color => color.addEventListener('click', handleColorClick));
 
if (range){
  range.addEventListener('input', handleRangeChange);
}
 
if (mode) {
  mode.addEventListener('click', handleModeClick);
}
 
if (saveBtn){
  saveBtn.addEventListener('click', handleSaveClick);
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.06.2022, 22:31
Ответы с готовыми решениями:

Испорченный конфигурационный файл
Сначала phpmyadmin у меня запускался. Теперь выдает ошибку 403. Я думаю, что-то удалила в...

Заставить крутиться испорченный жесткий
У меня не проблема даже а просто задачка прикладного характера звучит она так: Есть жесткий с...

Notepad++. Испорченный неверной кодировкой файл
Доброго времени суток. Ситуация следующая: есть текстовый файл (или был), содержание которого было...

Как восстановить файл, испорченный блокнотом?
Всем привет! Друзья, объясните, почему если открыть файл с помощью блокнота (например картинку в...

1
Модератор
Эксперт JS
6279 / 3518 / 1050
Регистрация: 07.09.2019
Сообщений: 5,666
Записей в блоге: 1
23.06.2022, 22:33 2
Замечу, что эта ошибка связана с кроссдоменными запросами — картинка лежит на другом сервере, pinclipart.com.
0
23.06.2022, 22:33
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.06.2022, 22:33
Помогаю со студенческими работами здесь

Можно ли восстановить испорченный при дефрагментации текст?
Семерка стала сильно тормозить и я решил сделать дефрагментацию диска. Это реально помогает и я...

Функция, получающая подстроку, возвращает испорченный указатель на строку
Пытаюсь выделить подстроку в Microsoft Visual C++ 2013, чтобы убрать путь к файлу и оставить только...

Холст не отображается
Добрый день! Я пытаюсь написать программу, в которой с помощью переключателей можно было бы...

Холст как фон
Здравствуйте! Подскажите пожалуйста как можно установить изображение .jpg в качестве бэграунда?...

Холст мешает нажатиям
Здравствуйте, я столкнулся с проблемой - один холст canvas не дает мне нажимать на другой холст...

Изменить холст изображения
Доброго времени суток. Сразу говорю, что в PHP не очень силён и в основном мои отношения с ним были...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru