小编Kai*_*ido的帖子

为什么更改画布大小会重置其参数?

当我更改画布大小时,我注意到参数“mozImageSmoothingEnabled”正在被重置。

HTML

<canvas id='canv'>Your browser don't support canvas.</canvas>
Run Code Online (Sandbox Code Playgroud)

Javascript

var cnv = document.getElementById('canv');
var ctx = cnv.getContext('2d');
console.log(ctx.mozImageSmoothingEnabled); // default 'true'
ctx.mozImageSmoothingEnabled = false;
console.log(ctx.mozImageSmoothingEnabled); // shows 'false'
cnv.width = 100;
console.log(ctx.mozImageSmoothingEnabled); // shows 'true'
Run Code Online (Sandbox Code Playgroud)

JSFiddle:https ://jsfiddle.net/epvtuz37/

这是一个错误,还是预期的行为?

javascript firefox mozilla canvas

3
推荐指数
1
解决办法
313
查看次数

将 ImageBitmap 转换为 Blob

我正在使用 createImageBitmap() 创建一个ImageBitmap文件。

如何将此文件转换为 blob 或理想情况下的 PNG,以便我可以上传?

javascript image html5-canvas

2
推荐指数
1
解决办法
4008
查看次数

无法克隆 OffscreenCanvas,因为它已分离

昨天用 HTML canvas 回到了我的爱好,并尝试在单独的线程中进行渲染,只是在控制台中遇到以下错误:

未捕获的 DOMException:无法在“Worker”上执行“postMessage”:无法克隆 OffscreenCanvas,因为它已分离。在主要(http://localhost:8000/responsivetemplate/:47:14

[索引.html]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="UTF-8" />
<title>OffscreenCanvas</title>
</head>
<body>
  <div id='wrapper'>
    <div id='content'>
      <canvas id="testcanvas" width="512" height="512"></canvas>
    </div>
  </div>
</body>
<script>
'use strict';

document.body.onload = function () {
  var canvas = document.getElementById('testcanvas');
  canvas.imageSmoothingEnabled = false;

  const …
Run Code Online (Sandbox Code Playgroud)

javascript html5-canvas offscreen-canvas

2
推荐指数
1
解决办法
1658
查看次数

Chrome,FileReader API,event.target.result ===“”

FileReader我有一个网络应用程序,它通过API 的方法对大文本文件(> 500mb)进行一些处理readAsText()
多年来它一直运行良好,但突然我得到了空响应:event.target.result是一个空字符串。

369MB 可以工作,但 589MB 不行。

我在多台电脑上测试过;结果相同,但它在 Firefox 中确实有效。Chrome 肯定在最近的更新中引入了这一点。

这个bug已经提交了吗?

有什么解决方法吗?

javascript google-chrome filereader

2
推荐指数
1
解决办法
1428
查看次数

svg传递参数

我正在尝试将参数传递给 svg,但我没有做错什么,你能帮我一下吗?

链接:codesandbox

网页:

<object type="image/svg+xml" data="button.svg?color=yellow">
      <param name="color" value="red" />
      <param name="label" value="stop" />
</object>
Run Code Online (Sandbox Code Playgroud)

图像:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
    <g>
        <rect 
id="button_rect" 
x="5" 
y="5" 
width="100" 
height="30" 
rx="15" 
ry="15" 
fill="param(color) blue" 
stroke="navy"
/>
<text id="button_label" x="55" y="30" text-anchor="middle" 
            font-size="25" fill="white" font-family="Verdana"
            content-value="param(label)">
            Ok
          </text>
    </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

html svg

2
推荐指数
1
解决办法
8136
查看次数

使用 showDirectoryPicker() 访问子目录文件内容

使用文件系统访问 API,我将如何访问所选目录的文件夹中包含的文件?

document.querySelector('button').addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file"){
      const file = await entry.getFile();
      const text = await file.text();
      console.log(text);
    }
    if (entry.kind === "directory"){
      /* for file in this directory do something */ 
    }
  }
});
Run Code Online (Sandbox Code Playgroud)
<button>Choose Directory</button>
Run Code Online (Sandbox Code Playgroud)

html javascript file-system-access-api

2
推荐指数
2
解决办法
5278
查看次数

无法获取未定义或空引用的属性“enumerateDevices”

我正在使用enumerateDevices请参阅此处的参考)来获取用户的摄像头和麦克风列表。

此代码在 Chrome 上运行良好:

$(document).ready(function(){
    navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
});
Run Code Online (Sandbox Code Playgroud)

但是由于它在 IE 上不受支持,因此会引发错误:

无法获取未定义或空引用的属性“enumerateDevices”

我的问题:是否有任何替代方法可以在所有浏览器中使用?

javascript internet-explorer getusermedia mediastream enumerate-devices

1
推荐指数
1
解决办法
7561
查看次数

清洁污染的帆布

是否可以清理受污染的帆布​​?

我有一个Openlayers地图,用户可以在其中添加具有CORS限制的图层.我不能通过我的代理配置绕过cors并且crossOrigin ='anonymus'不是一个选项.

我需要的是能够移除" "图层并让用户生成地图图像.

所以我试着:

  • 删除无法打印的图层
  • 尝试同步地图
  • 尝试打印

但我总是得到cors错误.如何在不刷新浏览器的情况下再次使我的地图变得更好?

javascript openlayers html5-canvas html2canvas

1
推荐指数
1
解决办法
212
查看次数

MS Edge 中的 :scope 伪选择器

每当我querySelectorAll在 Microsoft Edge 中使用:scope伪选择器时,控制台中都会出现此错误

SCRIPT5022: SCRIPT5022:语法错误

我想知道是否有替代方案querySelectorAll,我在其中使用此参数::scope > * > table。我不想为此使用 jQuery。谢谢。

编辑:

我还想补充一下querySelector它本身就有效

好的,这是代码示例:

            function pJSON(panel) {
                var json = {tables: [], images: [], text: ""};
                var tables = Array.from(panel.querySelectorAll(":scope > * > table"));
                var images = Array.from(panel.querySelectorAll(":scope > * > img"));
                var text = panel.querySelector(":scope > textarea");
                tables.forEach(table => {
                    json["tables"].push(tJSON(table));
                });
                images.forEach(image => {
                    json["images"].push(image.outerHTML);
                });
                if (text) {
                    json["text"] = text.value;
                }
                return json;
            }
Run Code Online (Sandbox Code Playgroud)

我要再次指出,它适用于除 …

javascript selectors-api microsoft-edge

1
推荐指数
1
解决办法
988
查看次数

如何让网络工作者同时执行多项任务?

我试图让 Web Worker 管理其状态,同时服务多个异步请求。

工人.ts 文件

let a =0; //this is my worker's state

let worker=self as unknown as Worker;

worker.onmessage =(e)=>{
    console.log("Rec msg", e.data);

    if(e.data === "+1"){
        setTimeout(()=>{
            a=a+1;
            worker.postMessage(a);
        },3000);
    }else if(e.data=== "+2"){
        setTimeout(()=>{
            a=a+2;
            worker.postMessage(a);
        },1000)
    }
}
Run Code Online (Sandbox Code Playgroud)

这是我的主文件:main.ts

let w =new Worker("./worker.ts", {type: "module"})

let wf =async (op: string)=>{
    w.postMessage(op);
    return new Promise<any>((res,rej)=>{
        w.onmessage=res;
    });
}

(async()=>{
    let f1 = await wf("+1");
    console.log("f1",f1.data);
})();

(async()=>{
    let f2 = await wf("+2");
    console.log("f2",f2.data);
})()
Run Code Online (Sandbox Code Playgroud)

只能f2归还,就f1 …

javascript web-worker node.js typescript deno

1
推荐指数
1
解决办法
2286
查看次数

了解屏幕外画布以提高性能

大家好,我有一个非常复杂的画布编辑器,允许用户使用 Konvajs 和 Gifler 库选择视频背景、添加文本、gif 和 Lottie 动画。它已经走了很长一段路,但是我正在尝试加快我的画布应用程序的性能。我已经阅读了很多关于屏幕外画布的内容,但我不太明白。假设我有一个常规的 HTML 画布对象,我将如何创建一个离屏画布并将其吐回浏览器?理想情况下,我希望能够以 30 fps 的速度从画布中以无延迟的速度从数组中获取图像。我还担心,根据caniuse.com 的说法,屏幕外画布似乎尚未得到广泛支持。每当我尝试从我的画布创建屏幕外画布时,我总是得到:

Failed to execute 'transferControlToOffscreen' on 
'HTMLCanvasElement': Cannot transfer control from a canvas that has a rendering context.
Run Code Online (Sandbox Code Playgroud)

正如我所说,我只是想弄清楚如何平滑地渲染我的动画,但不知道如何去做。这里的任何帮助都会很棒。这是代码。

<template>
  <div>
    <button @click="render">Render</button>
    <h2>Backgrounds</h2>
    <template v-for="background in backgrounds">
      <img
        :src="background.poster"
        class="backgrounds"
        @click="changeBackground(background.video)"
      />
    </template>
    <h2>Images</h2>
    <template v-for="image in images">
      <img
        :src="image.source"
        @click="addImage(image)"
        class="images"
      />
    </template>
    <br />
    <button @click="addText">Add Text</button>
    <button v-if="selectedNode" @click="removeNode">
      Remove selected {{ selectedNode.type }}
    </button>
    <label>Font:</label>
    <select v-model="selectedFont">
      <option value="Arial">Arial</option>
      <option …
Run Code Online (Sandbox Code Playgroud)

javascript canvas konvajs offscreen-canvas

0
推荐指数
1
解决办法
3217
查看次数

使用以“&lt;”开头的字符串时无法设置innerHTML

我有一个 textarea,它将用用户输入的内容填充另一个部分,只要我不输入以“<”开头的任何内容,我的代码就可以正常工作。每当我有一个像“<anything else can follow”这样以“<”开头的字符串时,它就不会设置innerhtml。

var text = "<i wont print"
text = "i will print!"
trans_txt.innerHTML = text;
Run Code Online (Sandbox Code Playgroud)

“<”是innerhtml的某种覆盖字符吗?我想知道是否有人知道发生了什么,是否有一种方法可以将文本 var 更改为纯字符串,而不必担心我的字符串不显示。

编辑:我意识到这一点是因为默认的 textarea 消息是“<text area”

html javascript css

0
推荐指数
1
解决办法
55
查看次数