Итак, я пытался выяснить, как это сделать некоторое время, но безрезультатно, поэтому я решил просто спросить здесь! Я хочу иметь возможность легко загружать все, что вы рисуете на этом холсте, на Google Диск одним нажатием кнопки, но каждый раз, когда я пытаюсь назначить data-src для API Google Диска, я не могу. Я не знаю, как включить Javascript в HTML. У меня есть кнопка сохранения, которая использует canvas.toDataUrl, но мне также нужна кнопка сохранения на Google Диске, которая использует toDataUrl в качестве источника. Мой код ниже. Я сделал все это на repl.it, поэтому вы также можете найти мой код на https://repl.it/@AnthonyRobinso2/Pixel-Paint
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<center>
<body>
<canvas onmouseup="stop(event)" onmousedown="go(event)" onmousemove="paint(event)" id='pixelCanvas' height='400px' width='450px' ></canvas>
<div class = 'details'>
<button onclick="clearCanvas()">Clear</button>
<button onclick='eraser()'>Eraser</button>
<button onclick='smallerSize()'>-1 Pixel</button>
<button onclick="biggerSize()">+1 Pixel</button>
<button onclick='save()'>Save</button>
<div>
<p>Simple Color Changer</p>
<input type="range" min="0" max="12" value="0" class="slider" id="myRange">
</div>
<div>
<p>Advanced Color Changer</p>
<input type='color' id='advancedColorPicker' value="#000000" onchange='advancedColor()'>
</div>
<div>
<p>Preview:</p>
<canvas id = 'preview' height='50px' width='50px'></canvas>
<p id='colorSliderValue'>Black</p>
<p>Simple Background Color Changer</p>
<input type="range" min="0" max="12" value="0" class="slider" id="backgroundSlider">
<p>Moving this will erase all you have drawn! Be warned!</p>
<div class="g-savetodrive" id='saveToDrive'
data-src= 'THIS IS WHAT I NEED HELP WITH'
data-filename="Pretty Picture"
data-sitename="Pixel Paint">
</div>
<script src="script.js"></script>
</div>
</body>
</center>
</html>
Javascript:
var canvas = document.getElementById("pixelCanvas");
var previewCanvas = document.getElementById('preview');
var previewCtx = previewCanvas.getContext("2d");
var ctx = canvas.getContext("2d");
var brushWidth = 1;
var brushHeight = 1;
var x;
var y;
var start;
var radius = 1;
var color = 'black';
var backgroundColor = 'lightgrey';
previewCtx.beginPath();
previewCtx.arc(25,25,radius, 0, 2 * Math.PI);
previewCtx.fillStyle = color;
previewCtx.fill();
function drawBackground(){
ctx.beginPath();
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle = backgroundColor;
ctx.fill();
}
drawBackground();
function go(event){
start=1;
}
function paint(event) {
var rect = canvas.getBoundingClientRect();
mouseX = event.clientX - rect.left;
mouseY = event.clientY - rect.top;
if(start==1){
ctx.beginPath();
ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
}
}
function stop(event) {
start=0;
}
function clearCanvas(){
drawBackground();
}
function biggerSize(){
radius = radius + 1
previewCtx.clearRect(0,0,previewCanvas.width,previewCanvas.height);
previewCtx.beginPath();
previewCtx.arc(25,25,radius, 0, 2 * Math.PI);
previewCtx.fillStyle = color;
previewCtx.fill();
}
function smallerSize(){
if(radius > 1){
radius = radius - 1
previewCtx.clearRect(0,0,previewCanvas.width,previewCanvas.height);
previewCtx.beginPath();
previewCtx.arc(25,25,radius, 0, 2 * Math.PI);
previewCtx.fillStyle = color;
previewCtx.fill();
}
}
var slider = document.getElementById("myRange");
var backgroundSlider = document.getElementById("backgroundSlider");
// Update the current slider value (each time you drag the slider handle)
backgroundSlider.oninput = function(){
if(this.value == 0){
backgroundColor = 'lightgrey';
drawBackground();
}
if(this.value == 1){
backgroundColor = 'black';
drawBackground();
}
if(this.value == 2){
backgroundColor = 'brown';
drawBackground();
}
if(this.value == 3){
backgroundColor = 'cyan';
drawBackground();
}
if(this.value == 4){
backgroundColor = 'blue';
drawBackground();
}
if(this.value == 5){
backgroundColor = 'green';
drawBackground();
}
if(this.value == 6){
backgroundColor = 'magenta';
drawBackground();
}
if(this.value == 7){
backgroundColor = 'orange';
drawBackground();
}
if(this.value == 8){
backgroundColor = 'pink';
drawBackground();
}
if(this.value == 9){
backgroundColor = 'violet';
drawBackground();
}
if(this.value == 10){
backgroundColor = 'red';
drawBackground();
}
if(this.value == 11){
backgroundColor = 'yellow';
drawBackground();
}
if(this.value == 12){
backgroundColor = 'white';
drawBackground();
}
}
slider.oninput = function() {
var output = document.getElementById("colorSliderValue");
output.innerHTML = slider.value; // Display the default slider value
output.innerHTML = this.value;
if(this.value == 0){
output.innerHTML = 'Black';
color = 'black';
output.style.color = 'black';
}
if(this.value == 1){
output.innerHTML = 'Grey';
color = 'grey';
output.style.color = 'grey';
}
if(this.value == 2){
output.innerHTML = 'Brown';
color = 'brown';
output.style.color = 'brown';
}
if(this.value == 3){
output.innerHTML = 'Cyan';
color = 'cyan'
output.style.color = 'cyan';
}
if(this.value == 4){
output.innerHTML = 'Blue';
color = 'blue'
output.style.color = 'blue';
}
if(this.value == 5){
output.innerHTML = 'Green';
color = 'green';
output.style.color = 'green';
}
if(this.value == 6){
output.innerHTML = 'Magenta';
color = 'magenta';
output.style.color = 'magenta';
}
if(this.value == 7){
output.innerHTML = 'Orange';
color = 'orange';
output.style.color = 'orange';
}
if(this.value == 8){
output.innerHTML = 'Pink';
color = 'pink';
output.style.color = 'pink';
}
if(this.value == 9){
output.innerHTML = 'Violet';
color = 'violet';
output.style.color = 'violet';
}
if(this.value == 10){
output.innerHTML = 'Red';
color = 'red';
output.style.color = 'red';
}
if(this.value == 11){
output.innerHTML = 'Yellow';
color = 'yellow';
output.style.color = 'yellow';
}
if(this.value == 12){
output.innerHTML = 'White';
color = 'white';
output.style.color = 'white';
}
previewCtx.clearRect(0,0,previewCanvas.width,previewCanvas.height);
previewCtx.beginPath();
previewCtx.arc(25,25,radius, 0, 2 * Math.PI);
previewCtx.fillStyle = color;
previewCtx.fill();
}
function eraser(){
color = backgroundColor;
previewCtx.clearRect(0,0,previewCanvas.width,previewCanvas.height);
previewCtx.beginPath();
previewCtx.arc(25,25,radius, 0, 2 * Math.PI);
previewCtx.fillStyle = 'lightgrey';
previewCtx.stroke();
previewCtx.fill();
}
function advancedColor(){
color = document.getElementById('advancedColorPicker').value;
previewCtx.clearRect(0,0,previewCanvas.width,previewCanvas.height);
previewCtx.beginPath();
previewCtx.arc(25,25,radius, 0, 2 * Math.PI);
previewCtx.fillStyle = color;
previewCtx.fill();
}
function save(){
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
window.location.href=image;
}
document.getElementById('saveToDrive');
console.log(saveToDrive.data);
CSS:
#pixelCanvas{
border:1px solid black;
background-color:lightgrey;
cursor:
}
#colorSliderValue{
position: relative;
text-Shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;
}
#preview{
border:1px solid black;
background-color:lightgrey;
}
.details{
position: relative;
}
