如何将Google Drive API的data-src分配给HTML中的Canvas

问题描述 投票：1回答：1

好吧，所以一段时间以来我一直在努力寻找方法，但无济于事，所以我想我只是在这里问！我希望能够通过单击按钮将在此画布上绘制的任何内容轻松地上传到Google云端硬盘，但是每次我尝试为Google云端硬盘API分配data-src时，我都无法这样做。我不知道如何将Javascript合并到html中。我有一个使用canvas.toDataUrl的保存按钮，但是我还想要一个使用toDataUrl作为src的Google云端硬盘保存按钮。我的代码如下。我在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;
}
javascript html canvas google-drive-api html5-canvas
1个回答
0
投票

来自Save to Drive属性/参数的data-src文档：

data-src是必填参数，包含要保存的文件的URL。

  • URL可以是绝对的或相对的。

  • data-src URL可以从与托管按钮的域相同的域，子域和协议提供。您必须在页面和数据源之间使用匹配的协议。

  • 不支持数据URI和file:// URL。

  • 由于浏览器的原始政策，该URL必须与放置该URL的页面位于同一域中，或者可以使用跨源研究共享（CORS）进行访问。如果按钮和资源位于不同的域中，请参考Handle buttons and resources on different domains。（＃domain）。

  • 要在http和https都服务于同一页面时提供文件，请指定没有协议的资源，例如data-src="//example.com/files/file.pdf"，该协议根据访问主机页面的方式使用适当的协议。

明确声明此方法不支持数据URI。

作为替代，我建议您使用Drive API Files: Create方法。单击“保存”按钮后，可以使用Canvas的Files: Create方法将其转换为toBlob() Blob（或者，如果愿意，可以为其指定另一个输出模仿类型，例如image/png），然后进行image/jpeg请求。为此，我建议您检查以下链接，因为我认为它们对您有用：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.