个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:19:01 24 4
gpt4 key购买 nike

好吧，所以我一直在尝试找出如何做到这一点一段时间，但无济于事，所以我想我只是在这里问一下!我希望能够通过单击按钮轻松地将您在此 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/

24 4 0
文章推荐： javascript - 使用 animate.css(描述中的链接)如何在特定事件完成时触发动画
文章推荐： C++从文件的一部分加载数据
文章推荐： c++ - 强制 C++ 类实例在复制或分配时更改成员值
文章推荐： javascript - 访问不断变化的变量将不起作用(Johnny-Five 操纵杆)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com