uniapp H5中将图片链接转成base64

可以使用canvas将图片转换成base64格式，以下是示例代码：

// 获取图片
let img = new Image();
img.crossOrigin = 'anonymous'; // 需要设置图片跨域属性
img.src = 'https://example.com/image.jpg'; // 图片链接

// 将图片绘制到canvas上
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  let base64 = canvas.toDataURL('image/jpeg'); // 转换成base64格式
  console.log(base64);
}

注意：需要将图片设置为跨域，并且图片加载完成后才能进行转换。

相关问题

uniapp app h5 pdf转图片

UniApp是一款基于Vue.js的跨平台应用开发框架，它允许开发者构建一次，多端运行的应用，包括APP、Web和H5。关于将PDF转换成图片， UniApp提供了一些插件可以实现这个功能。

uni-app的`uni.convertToImage` API是一个用于转换Base64编码的数据（如PDF内容）为图片的工具。你可以先通过HTTP请求获取到PDF文件，然后将其转化为Base64字符串，最后调用`uni.convertToImage`方法生成图片。这是一个基本的步骤：

1. 获取PDF数据：使用JavaScript的fetch或axios等库从服务器获取PDF文件作为Blob对象。

const url = 'https://example.com/pdf.pdf';
fetch(url)
  .then(response => response.blob())
  .then(blob => {
    // blob is the PDF data as a Blob object
  });

2. 转换为Base64：将Blob转换为Base64字符串。

uni.getImageInfo(blob, res => {
  if (res.success) {
    const base64Data = res.data.tempFilePath; // 这里就是Base64格式的PDF数据
    // 然后使用convertToImage
  }
});

3. 转换为图片：调用`uni.convertToImage`函数，传入Base64数据。

uni.convertToImage(base64Data)
  .then(result => {
    // result.path保存转换后的图片路径，可以根据需要保存或显示
  })
  .catch(error => console.error(error));

uni-app H5 chooseImage 图片压缩转base64 压缩100KB 以内

UniApp 的 `chooseImage` API 可以帮助你在 H5 应用中选择图片，但是原生处理图片压缩并转成 base64 格式通常是在客户端完成的。要在 UniApp 中限制图片大小到100KB以内，你可以使用 JavaScript 或者 UniApp 提供的一些内置或第三方库，比如 vant-weapp 的 image-preview 组件。

下面是一个简单的步骤概述：

1. 使用 `uni.chooseImage` 获取用户选择的图片：

uni.chooseImage({
  count: 1, // 取消选择限制
  sourceType: ['album', 'camera'],
  success: function(res) {
    let tempFiles = res.tempFiles;
    if (tempFiles.length > 0) {
      processImage(tempFiles[0]);
    }
  },
});

2. 定义 `processImage` 函数，对图片进行压缩：

function processImage(file) {
  uni.getImageInfo({
    src: file.path,
    success: function(imgInfo) {
      const originalSize = imgInfo.size; // 获取原始图片大小

      // 使用 uniapp-sdk-image-resizer 这样的库进行压缩
      uni.imageCompress({
        src: file.path,
        quality: 0.8, // 设置压缩质量，范围0-1
        size: 100 * 1024, // 目标大小，单位是字节
        destType: 'base64',
        success: function(compressedData) {
          // 压缩后的 base64 编码
          const compressedBase64 = compressedData.result;
          // ...这里可以保存或发送压缩后的 base64 数据
        },
        fail: function(error) {
          console.error('压缩失败:', error);
        },
      });
    },
  });
}

请注意，实际效果可能因浏览器兼容性和图片本身的编码等因素略有差异。如果需要更精确的控制，你可能需要额外检查压缩后的文件大小是否达到目标。