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

标签 javascript html canvas google-drive-api html5-canvas

好吧，所以我一直在尝试找出如何做到这一点一段时间，但无济于事，所以我想我只是在这里问一下!我希望能够通过单击按钮轻松地将您在此 Canvas 上绘制的任何内容上传到 Google Drive，但每次我尝试为 Google Drive API 分配 data-src 时，我都做不到。我不知道如何将 Javascript 合并到 html 中。我有一个使用 canvas.toDataUrl 的保存按钮，但我还想要一个使用 toDataUrl 作为 src 的 Google Drive 保存按钮。我的代码如下。我在 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;
}

最佳答案

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

data-src is a required parameter containing the URL of the file to be saved.

  • URLs can be absolute or relative.

  • The data-src URL can be served from the same domain, subdomain, and protocol as the domain where the button is hosted. You must use matching protocols between the page and the data source.

  • Data URIs and file:// URLs are not supported.

  • Due to the browser's same origin policy, this URL must be served from the same domain as the page upon which it is placed, or be accessible using Cross Origin Research Sharing (CORS). If the button and resource are on different domains, refer to Handle buttons and resources on different domains.(#domain).

  • To serve the file when the same page is served by both http and https, specify the resource without a protocol such as data-src="//example.com/files/file.pdf", which uses the appropriate protocol based on how the hosting page was accessed.

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

作为替代方案，我建议您使用 Drive API Files: Create方法。单击“保存”按钮后，您可以使用 Canvas 'toBlob()方法将其转换为 image/png blob(或者，如果您愿意，您可以为其指定另一个输出 mimetype，例如 image/jpeg)，然后创建 创建请求。为此，我建议您查看以下链接，因为我相信它们对您有用:

关于javascript - 如何将 Google Drive API 的 data-src 分配给 HTML 中的 Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59363262/

上一篇：javascript - 访问不断变化的变量将不起作用(Johnny-Five 操纵杆)

下一篇：javascript - 循环更改 Rect html Canvas 的颜色

相关文章：

html - 我可以使用样式属性定义(覆盖)类吗？

Javascript 在 Canvas 旋转时查找像素

javascript - HTML5 Canvas 像素操作

javascript - 在字符串中传递的 HTML 标签无法正常渲染

javascript - html页面打开时如何隐藏表格

javascript - 如何循环遍历正则表达式匹配的字符串，concat 返回新的完整字符串

javascript - Highcharts 事件加载不起作用

html - 如何使 Rails 中的布局文件根据每个页面进行更改？

javascript - 覆盖 jQuery 选项卡 CSS

javascript - 使 Canvas 动画异步

©2024 IT工具网  联系我们