开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js保存网页图片不显示图片

当使用JavaScript保存网页上的图片时，有时可能会遇到图片不显示的问题。以下是一些基础概念、可能的原因以及解决方案：

基础概念

Canvas: HTML5中的一个元素，允许通过脚本进行图形绘制。
Blob: 表示不可变的原始数据，通常用于存储二进制数据。
URL.createObjectURL(): 创建一个DOMString，其中包含一个表示参数中给出的对象的URL。

可能的原因

跨域问题: 图片来源于不同的域，浏览器的同源策略阻止了图片的加载。
图片未完全加载: 在图片还未完全加载时就尝试保存，导致保存的是空白的图片数据。
权限问题: 浏览器安全设置可能阻止了某些操作。

解决方案

1. 确保图片完全加载后再保存

function saveImage(url, callback) {
    let img = new Image();
    img.crossOrigin = "Anonymous"; // 解决跨域问题
    img.onload = function() {
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        canvas.toBlob(function(blob) {
            let link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'image.jpg';
            link.click();
            URL.revokeObjectURL(link.href); // 释放内存
            if (callback) callback();
        });
    };
    img.src = url;
}

// 使用示例
saveImage('https://example.com/image.jpg', function() {
    console.log('图片已保存');
});

2. 处理跨域问题

如果图片服务器支持CORS（跨源资源共享），可以在请求头中添加crossOrigin属性：

img.crossOrigin = "Anonymous";

如果图片服务器不支持CORS，可能需要服务器端进行配置或者使用代理服务器来解决跨域问题。

3. 检查浏览器权限和安全设置

确保浏览器允许执行保存文件的操作，并且没有被安全软件拦截。

应用场景

用户自定义下载: 允许用户在网页上直接下载图片，无需离开页面。
自动化测试: 在自动化测试脚本中保存网页上的图片以供后续分析。

通过上述方法，可以有效解决JavaScript保存网页图片不显示的问题。如果问题依然存在，建议检查网络请求是否正常，以及图片服务器是否有特殊的访问限制。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

OpenCVSharp学习笔记（二）显示窗口和加载图片保存图片

显示窗口和加载图片创建和显示窗口，因为比较简单我就直接上代码了 //创建窗口 Cv2.NamedWindow("new", WindowFlags.Normal); //加载图片 Mat img =...Mat img = Cv2.ImRead(@"E:/1.jpeg"); 后面的参数为图片路径展示窗口 Cv2.ImShow("new", img); 第一个参数为窗口名称，后面为Mat类，也就是前面加载的图片类...该方法如果第一个参数指定的窗口名称不存在，则会自动进行创建后显示。...如果我们需要修改窗口的大小，可以使用 Cv2.ResizeWindow("new", 640,480); 第一个参数为窗口名称，后面为宽度和高度 Cv2.WaitKey(0);为设置窗口的等待时间，0为不限制时间，如果不添加该参数会发现窗口会闪退...Cv2.DestroyAllWindows();用于销毁窗口资源运行结果保存图片保存图片的方法很简单这里我就不多做说明了 Mat img = Cv2.ImRead(@"E:/1

3181 0

从网络下载图片，保存，并用 UIImageView 从保存中显示

//从网络下载图片 -(UIImage ) getImageFromURL:(NSString )fileURL { NSLog(@"执行图片下载函数"); UIImage * result...dataWithContentsOfURL:[NSURL URLWithString:fileURL]]; result = [UIImage imageWithData:data]; return result; } //将所下载的图片保存到本地...nExtension: (%@) is not recognized, use (PNG/JPG)", extension); NSLog(@"文件后缀不认识"); } } //读取本地保存的图片...，保存，并用 UIImageView 从保存中显示 NSString documentsDirectoryPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory..., NSUserDomainMask, YES) objectAtIndex:0]; NSLog(@"保存路径:%@",documentsDirectoryPath); //Get Image

6564 0

实现完整网页保存为图片的方法

业务场景中，会存在某些场景需要将网页内容快照保存下来的场景。...因为有些网页内容是联网异步获取的，所以爬虫保存html页面的方式无法保证后续数据与此前的一致性，因此将网页内容以图片保存下来，是一种简单而直接的思路。...命令，则会将js中指定的url页面内容生成图片并保存在指定的位置。...代码DEMO片段如下： /** * 将url内容转换为png图片保存 * @param url 目标url地址 * @param pngSavePath 图片保存位置 */ public static...在python中通过执行js语句，计算出网页真实的width和height值，然后对页面resize操作使其展示全部大小，之后再进行截图就可以保存整个网页了。

3K1 0

opencv保存图片

保存图片 cv2.imwrite('xxx.jpg',img) 以上是保存图片的方法我们还是先导入库之后，窗口大小及其他先设置好： import cv2 #导入cv2库 cv2.namedWindow...WINDOW_NORMAL) # 创建一个窗口名字为window cv2.resizeWindow('img', 800, 600) # 更改窗口的大小 img = cv2.imread('1.jpg') 保存图片其实与点击键盘按键退出的原理是一样的...，只不过修改的只是当我们点击键盘的某一个键时编程保存图片即可：若我们点击s键时，则是保存图片： (key & 0xFF == ord('s')): cv2.imwrite('baocun.jpg...',img) 所以我们就可以直接在按键q退出的下面加上按键s保存： if(key & 0xFF == ord('q')): break elif(key & 0xFF =...，保存的图片名字是baocun.jpg 所以，显示图片后我们点击s时，就会有一个保存图片在我们的根目录下：

2692 0

将网页中的canvas保存为图片

收到网友的请求，想把canvas保存为图片，其实很简单，canvas自带方法打开网页，如https://en.dpm.org.cn/dyx.html?...dest/files/image/8831/2009/2121/img0065.xml f12，找到canvas的dom，在console输入该dom的定位，$('#dyx canvas')，他就会显示该...的信息， [0]代码该dom的html代码调用toDataURL方法 $('#dyx canvas')[0].toDataURL("image/jpeg"); 即可得到base64的编码，剩下的保存就行了...注意：保存的只是页面显示到的，未显示的不会保存

2.5K2 0

TensorFlow 保存图片

# 根据路径读取图片img = tf.io.read_file(img_path)# 解码图片，这里应该是解码成了png格式img = tf.image.decode_png(img, channels...=1)# 大小缩放img = tf.image.resize(img, [28, 28])# 这一步转换张量数据类型很重要img = tf.cast(img, dtype=tf.uint8)# 编码回图片...img = tf.image.encode_png(img)# 保存with tf.io.gfile.GFile(img_path, 'wb') as file: file.write(img.numpy

1.6K4 0

Node.js 爬取网页图片

利用 Node.js 爬取一个网页，通过第三方模块 cheerio.js 分析这个网页的内容，最后将这个网页的图片保存在本地。...整体思路通过第三方模块 request 请求网页地址，从而得到整个网页的DOM结构。...根据DOM结构利用 cheerio 模块分析出图片文件的地址，再次请求这个地址，最后将得到的图片数据储存在本地。项目目录 image.png img 文件夹用来存储图片文件。...node_modules 文件夹是模块默认的保存位置。 index.js 文件是整个项目的入口地址。 config.js 文件是配置文件。 analyze.js 文件用来存储分析 DOM 的方法。...config.js 文件配置网页地址及图片存放路径 // 网页地址 const url = 'https://unsplash.com/photos/RDDYS5DFo08'; // 图片文件夹路径

4.3K3 0

python使用opencv如何保存图片_OpenCV Python 保存图片

本示例使用的OpenCV版本是：4.1.1 运行Python的编辑器：Jupyter notebook 示例目的通过无损和有损的方式进行图片保存。...实现代码 1，加载图片 import cv2 # 加载OpenCV img = cv2.imread(“dashen.jpeg”) # 读取/加载图片 2，把图片保存为PNG格式使用无损的方式保存成...我们在cv.imwrite()的第三个参数中设置了JPEG的编码方式保存图片，并设置了0值，此值在JPEG格式中取值范围是0-100，数值越高，保存的质量就越高。...程序说明本示例主要认识cv.imwrite()的作用，可以通过设置有损或者无损的方式保存图片。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

4.1K2 0

QImage 图片分割、保存

QImage 图片分割、保存简介之前一直只用Qt做图片显示，这次突发奇想想用Qt做做图像相关的，就尝试了一下图片切割，保存。...2.切割图片 ->2.1 设置切割属性：将图片切割为 n*m 个图片 ->2.2 计算每个图片的rect，保存为rect列表 ->2.3 利用copy(Rect)函数将指定区域图片copy出来，存储到切割列表中...3.显示图片 -> 按照rect列表显示切割后的图片 4.保存图片 -> 将切割后的图片存储到指定位置程序部分类图主要由三个类组成：Image类，负责图像操作部分。...void imageSave(); void imageSave(int index); void imageSave(int start,int end); //图像显示...>menuBar->addAction(QString("保存图片")); QAction* calcImage = ui->menuBar->addAction(QString("算法"));

2.2K2 0

网页使用外链图片403无法显示问题

前言之前碰到一个问题，就是html中通过img标签引入一个图片地址，报403。但是这个图片地址直接复制出来在地址栏打开，却是看得到的。...服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。...降级请求是指https协议的地址去请求http协议，所以上面403的情况还有另一种解决方法就是，请求的图片地址换成http协议，自己的地址使用http协议，这样降级请求也不会带上referrer。

1.3K4 0

iOS实现点击图片放大&长按保存图片

在实际操作中呢，会涉及到上传图片，在页面布局时，可能图片不是一张，考虑到布局的美观等因素，显示图片的位置变得很小，如果想查看上传的图片是否清晰，内容是否完整，可能就需要放大才能实现，下面就和大家分享一下我封装的一类...，完美的实现了图片的缩放功能。...写一个函数用来接收出入的UIImageView /** * @param contentImageview 图片所在的imageView */+(void)ImageZoomWithImageView...将视图显示出来 [backgroundView setAlpha:1]; } completion:^(BOOL finished) { }]; 7....调用封装类函数 //浏览大图点击事件-(void)scanBigImageClick:(UITapGestureRecognizer *)tap{ NSLog(@"点击图片"); UIImageView

6K2 0

Python 爬虫保存图片

最近在写爬虫但是图片保存用了很多种方法都没办法实现最后用这种方法实现了 import os,base64 import requests as req from PIL import Image from...io import BytesIO # 图片链接 response = req.get("https://bdfile.bluemoon.com.cn/group2/M00/0A/BA/wKg_HlwzY1SAIdXDAAFyo-ZOLKQ399....jpg") # 内存中打开图片 image = Image.open(BytesIO(response.content)) # 图片的base64编码 ls_f = base64.b64encode...(BytesIO(response.content).read()) # base64编码解码 imgdata = base64.b64decode(ls_f) # 图片文件保存 with open...('图片名.jpg', 'wb') as f: f.write(imgdata)

2K1 0

图片加载失败显示默认图片

在页面加载的图片的时候，如果图片不存在或者路径不存在，页面加载图片就会如下图所示。...解决方法：在img 标签中添加一下标签 onerror="onerror=null;src='img/a3.jpg'" src中写默认图片地址即可发布者：全栈程序员栈长，转载请注明出处：https

5.1K1 0

当网页图片不存在时不显示叉叉，显示默认图片的方法，管用的很！

有时候管理系统里面的产品图片没上传，或者因为网络原因传输过程中断了，图片没显示出来，就会显示一个叉叉，并且图片的占位符也不起作用了。...().Replace("original","middle")%>" alt="" class="img-responsive center-block"> js...","middle")%>" alt="" class="img-responsive center-block" onerror="nophoto()"> js

1.9K2 0

Canvas 显示图片

代码与预览如代码注释所言，整个过程就是： 1、准备好画板 2、准备好图片 3、图片准备好后贴到画布上原文地址：http://blog.techcave.cn/2017/09/13/Canvas

4.2K4 0

使用Nodejs+puppeteer 批量保存网页为图片或PDF

学习Three.js的时候,看到官方提供了很多很多的example,实在太多了,但并不是每个我都感兴趣,想去了解,但我又记不住每个链接对对应的效果是什么样的,于是我想,能不能把所有的案例用图片保存下来,...用图片来对异性每一个example不是更直接明了吗?...于是我准备写一个工具,这个工具可以批量将网页保存成图片或PDF并且生成对应的图片案例页面,或json数据说干就干因为对nodejs比较数据,于是就选择用nodejs+puppeteer来实现这个小工具...x.innerText.replace(/\//g, '_',) } }) console.log(linkArr) 效果如图: 主程序代码如下使用async await 递归example的链接数组进行截图,保存

1.8K1 0

objective-c 从网络下载图片，保存，并用 UIImageView 从保存中显示

//从网络下载图片 -(UIImage *) getImageFromURL:(NSString *)fileURL { NSLog(@"执行图片下载函数"); UIImage * result...NSURL URLWithString:fileURL]]; result = [UIImage imageWithData:data]; return result; } //将所下载的图片保存到本地...nExtension: (%@) is not recognized, use (PNG/JPG)", extension); NSLog(@"文件后缀不认识"); } } //读取本地保存的图片...，保存，并用 UIImageView 从保存中显示 NSString * documentsDirectoryPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory..., NSUserDomainMask, YES) objectAtIndex:0]; NSLog(@"保存路径:%@",documentsDirectoryPath); //Get Image

1.3K2 0

js下载网站中的canvas保存为图片

5584 0

OpenGL显示图片

由于实在不想用GDI的API了，就用OpenGL的方式实现了一下基本的显示功能。用GDAL读取图像，这样就能与图像格式无关。...OpenGL的glDrawPixels()函数也能实现图像显示，但是现在高版本的OpenGL都采用glTexImage2D()贴纹理的方式了，也不用考虑图像大小是否是2的N次方，或者4字节对齐的问题。...keyboard); //glutMouseWheelFunc(mouse_wheel); //glutIdleFunc(idle); glutMainLoop(); return 0; } 最后显示的情况如下

3.4K1 0

为什么html在浏览器中不能显示图片_做html网页图片显示不出来

我遇到的问题是写了一个HTML程序，结果在网页上面不能显示，原因是图片路径放置错了。修改前代码：　效果图： ie网页上右键点击...“属性”’查看图片路径发现地址错误，我存放图片的地址在C:\Users\Administrator\Desktop\Python源码，所以将路径改为绝对路径(有的时候查看一些网页没能加载出来图片就是因为作者写的是绝对路径...，然后我们不能访问作者的路径，如果是相对路径就可以显示了)： <!

5.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭